Vue Router如何设计一个高扩展性的路由

我们在使用Vue做项目开发的时候，路由这一块肯定是少不了的。我们是否真正去考虑过、设计过如何才能整一个漂亮的、高扩展性的路由。

可能很多开发者不以为然，认为路由嘛，不久是那么回事嘛，直接开撸就完事了，如果后期有什么需求，加什么页面，再随便加个路由，指向一个页面就行了。那么我可以很明确的告诉你，小项目这么干，可能问题不大，如果稍微大一点的项目，几百个路由的时候，你不做区分，不做规划，那么可能你自己都会看懵逼，整个路由混乱不堪。

可能我这么说，你们还是觉得没什么说服力，下面我来举一个实际的例子（我以ant-design为例），看看高扩展性的路由是如何设计的：

                  

现在我们有登录页和注册页，此处暂停两分钟，请你思考一下，你会怎么来写这个路由?

下面来看看我的思考：

• 1.登录、注册都是和用户相关的，如何能在地址栏中体现出来
• 2.登录、注册都是在一个view中展示出来的，我们需要一个容器来承载这两个页面
• 3.后期还会添加忘记密码、重置密码等功能吗？如何才能优雅的融入？

 {
    path:'/user',
    name:'user',
    component:()=>
    import("../layout/UserLayout.vue"),
    children:[
      {
        path:'/user',
        redirect:"/user/login",
      },
      {
        path:"/user/login",
        name:"login",
        component: () =>
          import("../views/User/Login.vue")
      },
      {
        path:"/user/register",
        name:"register",
        component: () =>
          import("../views/User/Register.vue")
      },
     //忘记密码
     //重置密码
    ]
  }

我们通过user来做识别，user下面的路由都是和用户相关的，UserLayout.vue作为一个容器，承载子组件，或者承载共有元素；我们希望展示的是登录页，所以利用重定向来实现。现在是不是看起来优雅多了，如果有一天，你接到通知，需要添加一个忘记密码，是不是......嗯，就不多说了。