Vue-实现路由跳转传值的几种方式

发表于 更新于 分类于 阅读次数：

URL路径：http://localhost:8080/#/test?userid=1

1
<router-link :to="{path:'/test',query: {userid: id}}">跳转</router-link>

接收数据：

1
var id = this.$route.query.userid

二、this.$router.push()

1、使用path+query

URL路径：http://localhost:8080/#/selectCate?userid=1

发送数据：

1
2
var id = 1;
this.$router.push({path:'/selectCate',query:{userid:id}});

接收数据：

1
var id = this.$route.query.userid;

2、使用name+params

URL路径：http://localhost:8081/#/selectCate

发送数据：

1
2
3
var id = 1;
this.$router.push({name:'selectCate',params:{userid:id}});
12

接收数据：

1
var id = this.$route.params.userid;

注意：使用query，传输的值会在url后面以参数的形式显示出来，可以刷新页面，数据不变；而使用params，参数不会出现在url后面，但是一刷新页面传的值就没了。

三、sessionStorage存值

使用sessionstorage可以将值保存在浏览器上，方便存取。

1
2
3
window.sessionStorage.setItem('token', this.token); //存值

window.sessionStorage.getItem('token'); //取值