Vue router传参

Vue router传参

router-link标签跳转传参

内部router通过<router-link>进行router跳转

// 1、设置对应的params
 <router-link :to="{name:'music',params:{data:'123'}}">进行音乐</router-link>

// 2、获取参数，在created生命周期通过this.$route.query获取
 created() {
   console.log(this.$route.params.data);
 }

router push带参跳转

// router中的配置 
  {
     path: 'list/flow/:type',
     name: 'flowList',
     component: () => import('@/views/FlowList'),
   }, 
   
// 在界面进行跳转
    this.$router.push(`/list/flow/${type}`);
  
// 在router加载的生命周期中获取
    beforeRouteUpdate(to, from, next) {
    this.type = to.params.type;
    ...
  }

Router通过props传参

// router中的配置 
routes: [
    { path: '/user/:code', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:code',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
  
// 在界面进行跳转
this.$router.push(`/list/flow/${code}`);

// 在接收组件进行prop申明
props: {
    code: {}
},