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作爲一個容器，承載子組件，或者承載共有元素；我們希望展示的是登錄頁，所以利用重定向來實現。現在是不是看起來優雅多了，如果有一天，你接到通知，需要添加一個忘記密碼，是不是......嗯，就不多說了。