vue路由传参的三种方式

1、方案一

1.1定义路由

    path: '/circulation',
    component: () => import('@/views/reSeManage/circulation/index'),
    name: 'Circulation',
   meta: { 
      title: '文件传阅单',
      icon: '',
      }

1.2 页面传参

this.$router.push({
   path: '/circulation',
   name:'Circulation',
   params:{
     id: row.strongNumber
   }
  })

1.3 页面获取

this.$route.params.id

1.4 页面效果

方案二

2.1 定义路由

 path: '/circulation',
 component: () => import('@/views/reSeManage/circulation/index'),
 name: 'Circulation',
 meta: { 
   title: '文件传阅单',
   icon: '',
   }

2.2 页面传参

this.$router.push({
   name:'Circulation',
   params:{
     id: row.strongNumber
   }
  })

2.3 页面获取

this.$route.params.id

2.4 页面效果

方案三

3.1 定义路由

 path: '/circulation',
 component: () => import('@/views/reSeManage/circulation/index'),
 name: 'Circulation',
 meta: { 
   title: '文件传阅单',
   icon: '',
   }

3.2 页面传参

this.$router.push({
   path: '/circulation',
   query:{
     id: row.strongNumber
   }
  })

3.3 页面获取

this.$route.query.id

3.4 页面效果

总结

对比三种方案：
方案二不会拼接在路由后面
方案一和方案三参数拼接在后面