VueRouter 之 路径动态传参

步骤

使用

1. 父组件
   

	:to="{
      // 根据路由名称进行跳转
      name: 'article',

      //传递路由动态参数
      params: {
        // 属性名：路由路径中设计的动态参数名称
        articleId: article.art_id
      }
    }"

2. 路由
   

 {
    path: '/article/:articleId',
    name: 'article',
    component: () => import('@/views/article'),
    // 开启 Props 传参，把路由参数映射到组件的 props 数据中
    props: true
  }

3. 子组件
   

  props: {
    articleId: {
      type: [Number, String],
      required: true
    }
  },

优点

解耦，结构清晰

效果

更多

VueRouter 官网