vue-router中定義動態路由、嵌套路由，並動態獲取參數

路由的定義，主要有以下幾步：

1. 如果是模塊化機制，需要調用 Vue.use(VueRouter)

2. 定義路由組件，如：

   const Foo = {
      template: '<div>foo</div>'
   };

3. 定義路由（數組）：

   const routes = [
      {
          path: '/foo',
          component: Foo
      }
   ];

4. 創建 router 實例

   const router = new VueRouter({
      routes
   });

5. 創建和掛載根實例

   const app = new Vue({
      routes
   }).mount('#app');

嵌套路由主要是通過 children，它同樣是一個數組：

{
    path: '/user',
    component: User,
    children: [
        {
            path: 'file',
            component: File
        }
    ]
}

這時訪問，/user/file 會映射到 File 組件

動態路由的創建，主要是使用 path 屬性過程中，使用動態路徑參數，以冒號開頭，如：

{
    path: /user/:id
    component: User
}

這會是訪問 user 目錄下的所有文件，如 /user/a 和 /user/b，都會映射到 User 組件

當匹配到 /user 下的任意路由時，參數值會被設置到 this.$route.params 下，所以通過這個屬性可以獲取到動態參數，如：

const User = {
    template: '<div>User {{ $route.params.id }}</div>'
}

這裏會根據訪問的路徑動態的呈現，如訪問 /user/aaa 會渲染：

<div>
    User aaa
</div>