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'); //取值