vue中路由跳转传递参数的五种方式

日常业务中，路由跳转的同时传递参数是比较常见的，vue 的跳转方式如下：

1.第一种： router-link params

<router-link tag="a" :to="{name:'测试页',params:{id:1}}">点击跳转(name)</router-link>


//跳转后页面获取参数
this.$route.params.id

2.第二种：router-link query

<router-link tag="a" :to="{path:'./test',query:{id:1}}">点击跳转(path)</router-link>

//跳转后页面获取参数
this.$route.query.id

3.通过动态路由方式

//路由配置文件中 配置动态路由
{
     path: '/detail/:id',
     name: 'Detail',
     component: Detail
   }
//跳转时页面
var id = 1;
this.$router.push('/detail/' + id)

//跳转后页面获取参数
this.$route.params.id

4.params

<!--html代码:-->
<div @click="clickTo">点击跳转</div>

this.$router.push({
  name: "测试页",
  params: { id: 1 },
});

//跳转后页面获取参数
this.$route.params.id;

5.query

<!--html代码:-->
<div @click="clickTo">点击跳转</div>

this.$router.push({
  path: "/测试页",
  query: { id: 1 },
});

//跳转后页面获取参数
this.$route.query.id;

补充：注意事项

总结：

第 1，2 种，是通过标签跳转，第 4，5 种是通过事件跳转页面。

第 1，4 种，是通过 name 命名路由的方式跳转传参，跳转后页面刷新，参数会丢失（需要传参跳转的时候，不建议使用）；

第 2，5 种，是通过 path 路由跳转，跳转后页面刷新，参数不会丢失，跟我们平时写的路径后面携带参数类似：/test?id=1 (推荐使用);

第 3 种，是动态路由传值跳转，跳转后页面刷新，参数不会丢失。动态路由一般用来传一个参数时居多(如详情页的 id), query、params 可以传递一个也可以传递多个参数 。