vue路由传参

1.router-link传参
在路径中显示参数，刷新页面参数不丢失。

//路由配置
{
  path: '/test/:id',
  name: 'test',
  component: test
}

//传递参数
<router-link :to="`/test/${id}`"></router-link>

//获取参数
this.$route.params.id

//传递参数
<router-link :to="{path:'/test',query:{id:'001'}}"></router-link>
<router-link :to="/path?id=001"></router-link>

//获取参数
this.$route.query.id

2.编程式路由导航，通过path匹配路由传参
在路径中显示参数，刷新页面参数不丢失

//配置路由
{
  path: '/test/:id',
  name: 'test',
  component: test
}

//传递参数，通过path匹配路由，path后面跟上对应的参数值
this.$router.push({
  path: `/test/${id}`
})

//获取参数
this.$route.params.id

//传递参数，通过path匹配路由
this.$router.push({
  path:'/test',
  query: {
    id:'001'
  }
})

//获取参数
this.$route.query.id

3.编程式路由导航，通过name匹配路由传参

params方式不在路径中显示参数，刷新页面参数丢失

//传递参数,通过name匹配路由
this.$router.push({
  name: "name", //路由配置中的name
  params:{
    id:'001'
  }
});

//获取参数
this.$route.params.id

query方式在路径中显示参数，刷新页面参数不丢失

//传递参数，通过name匹配路由
this.$router.push({
  name:'name',//路由配置中的name
  query: {
    id:'001'
  }
})

//获取参数
this.$route.query.id