vue中的动态路由

介绍

需要把某种模式匹配到的所有路由，全部映射到同一个组件 例如： 我们有一个user组件，对于所有id不同的用户，都要使用这个组件来渲染，那么我们可以在vue-router的路由路径中使用动态路径参数来达到这个效果。

使用

html代码： <div id="app"> <router-link to="/user/1">user1</router-link> <router-link to="/user/2">user2</router-link> <router-view></router-view> </div> js代码： // 1.定义组件 let user = { // 接受参数 template:` <div>{{$route.params.id}}</div> ` } // 2.创建路由实例对象 let router = new VueRouter({ routes:[{ // 动态路径参数使用:开头 path:'/user/:id', component:user }] }) new Vue({ el:"#app", // 将路由实例对象导入vue实例 router //相当于router:router,在此使用简写形式 })

注意

当使用动态路径参数的时候，从/user/1到user/2的时候，组件user实例就会被复用，比起销毁再重建，复用更加高效。但是组件也会因此不再重新创建，这就导致一个问题，声明周期钩子函数就不会被调用了，此时需要用watch来监测$route对象的变化

let user = { // 接受参数 template:` <div>{{$route.params.id}}</div> `, watch: { $route(to,from) { console.log('to',to) console.log('from',from) } } }