1.命名路由

    有時候，通過一個名稱來標識一個路由顯得更方便一些，特別是在連結一個路由，或者是執行一些跳轉的時候。你可以在建立 Router 例項的時候，在 routes 配置中給某個路由設定名稱。我個人理解就相當於給路徑取個名字，呼叫的時候，這個名字就指這個路徑，不然有些路徑很長，直接寫太麻煩。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

要連結到一個命名路由，可以給 router-link

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

或者程式碼呼叫 router.push()：

router.push({ name: 'user', params: { userId: 123 }})

這兩種方式都會把路由導航到 /user/123 路徑。

2.路由巢狀

    有時候，我們會有這樣的需求 ：

    ①將App.vue用作主路由視窗，有著一個main內容（一般是頂欄和低欄），其他所有的子元件都基於App.vue渲染，這樣路由配置可以配置成同一級的，每次跳轉路由都銷燬之前的路徑。

    ②但是大部分時候，我們不一定非要基於App.vue的所有樣式，意思就是整個工程有樣式不同的好幾種頁面，比方說有些頁面都要頂欄和低欄，有些頁面只要頂欄...   

    這時候採取的解決方法是：ⅠApp.vue僅作為一個路由視窗，不新增任何內容，僅僅是為了對映其他子元件。

                                                    Ⅱ子元件單獨建立兩個類似於App.vue作用的元件，用來提供所需樣式，並對映其他分別基於此的孫子元件。這時候路由index.js配置時要用到children,redirect,'',/等

3.重定向與別名

 { path: '/a', redirect: '/b' } // 從/a重定向到/b
 

 上面意思是跳轉到/a時自動就變成/b了，所以永遠不會跳轉到/a，可以用來授權登陸前的驗證判斷

重定向的目標也可以是一個命名的路由：

{ path: '/a', redirect: { name: 'b' }}

 甚至是一個方法，動態返回重定向目標：

    { path: '/a', redirect: to => {
      // 方法接收 目標路由 作為引數
      // return 重定向的 字串路徑/路徑物件
    }}

 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

重定向和別名的區別：

重定向：當用戶訪問 /a時，URL 將會被替換成 /b，然後匹配路由為 /b，那麼『別名』又是什麼呢？

 別名：/a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像使用者訪問 /a一樣。

上面對應的路由配置為：

{ path: '/a', component: A, alias: '/b' }

『別名』的功能讓你可以自由地將 UI 結構對映到任意的 URL，而不是受限於配置的巢狀路由結構。

4.url開啟自動跳轉到‘/’。 而‘’則意味著自動跳轉到上一級時自動跳轉空路徑

    { path: '/', redirect: '/header' }, // 重定向到/header
    { path: '/header',
      name: 'header',
      component: Header,
      children: [
        { path: '', redirect: 'login' }, // 預設跳轉到/header/login
        { path: 'login', name: 'login', component: Login },
        { path: 'register', name: 'register', component: Register },
        { path: 'forgetPassword', name: 'forgetPassword', component: ForgetPassword }
      ]
    },