我们在匹配 规则时例如:
{ path: '/user/1', component: User }
当我们出现这种情况时:
{ path: '/user/1', component: User }
{ path: '/user/2', component: User }
{ path: '/user/3', component: User }
我们就是可以使用动态路由匹配,通过传参的方式来简化我们的程序。一般这种情况的场景例如:点击某个详情,显示具体的描述
具体使用方法:
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User } //:表示将使用动态路由参数, id 为参数名
]
})
当使用了动态路由参数后,我们可以通过 $route.params.参数名 来获取到该参数值
具体事例可以参考:https://blog.csdn.net/weixin_38527697/article/details/99682821 中的势力