vue-router 是 Vue.js 官方的路由外掛，適合用於構建標籤頁應用。Vue 的標籤頁應用是基於路由和元件的，路由用於設定訪問路徑，並將路徑和元件對映起來，vue-router 會把各個元件渲染到正確的地方。

首先，.vue中的內容非常簡單，<router-link>建立標籤，並指定路徑，<router-view>渲染路由匹配到的元件。

<template>
    <div id="account">
        <p class="tab">
            <!-- 使用 router-link 元件來導航. -->
            <!-- 通過傳入 `to` 屬性指定連結. -->
            <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
            <router-link to="/account/course">我的課程</router-link>   <!-- 注意這裡的路徑，course和order是account的子路由 -->
            <router-link to="/account/order">我的訂單</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的元件將渲染在這裡 -->
        <router-view></router-view>
    </div>
</template>
 

結構很簡單，我們有一個賬戶頁 account，account 中還包含兩個標籤頁，分別是課程 course 和訂單 order。

在寫路由的時候，需要注意頁面間層級關係，開始我是這樣寫的：

import Vue from 'vue'
import Router from 'vue-router'
import Account from ...
import CourseList from ...
import OrderList from ...

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/account',
      name: 'account',
      component: Account
    },
    {
       path: '/my-course',
       name: 'course',
       component: CourseList
     },
     {
       path: '/my-order',
       name: 'order',
       component: OrderList
     }
  ]
})
 

這樣做會使得點選 <router-link> 時，跳轉到新頁面，而不是在 <router-view> 中顯示元件。

正確的路由應該這樣寫：

routes: [
    {
      path: '/account',
      name: 'account',
      component: Account,
      children: [
        {name: 'course', path: 'course', component: CourseList},
        {name: 'order', path: 'order', component: OrderList}
      ]
    }
]
 

註冊一個根路由 account，將 course 和 order 註冊為 account 中的子路由，和 <router-link> 中 to="account/course" 對應。
 
剛開始做 Vue，這個問題困擾了很久，特此記錄。