学习前端_vue组件_动态路由参数

我们在匹配 规则时例如：

{ 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 中的势力