vue动态路由

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。能够提供参数的路由即为动态路由
第一步：定义组件

const Goods = {
template: `
<div>{{this.$route.params}}商品</div>
`,
created(){
console.log(this.$route.params);
},
watch:{
$route(){
console.log(this.$route.params);
}
}
}

第二部配置路由

const routes = [
{
path: '/goods/:type',
component: Goods
} ] const router = new VueRouter({
routes
}) const app = new Vue({
el: '#app',
router
})

第三不配置模板

<router-view></router-view>
<router-link to="/goods/book">图书商品</router-link>
<router-link to="/goods/car">汽车商品</router-link>
<router-link to="/goods/food">美食商品</router-link>

//监听路由
const Goods = {
template: `
<div>{{this.$route.params}}商品</div>
`,
watch:{
'$route': {
handler: function(){
console.log(this.$route.params);
},
immediate: true （立刻）
}
}