4.怎么定義 vue-router 的動態路由? 怎么獲取傳過來的值

在router目錄下的index.js文件中，對path屬性加上/:id。 

使用router對象的params.id 例如 :  this.$route.params.id

 

詳解：https://blog.csdn.net/weixin_41399785/article/details/79381357

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

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>