VUE路由传参

通常情况下,我们在做项目过程中会遇到vue页面路由带参跳转的情况,本文将介绍解决此问题的两种常用方案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//发送
<router-link
:to="{
path:'selfPath',
params:{
name:'name',
data:data
},
query:{
name:'name',
data:data
},
}">
</router-link>

//接收
let receiveParamData = this.$route.params.data
let receiveQueryData = this.$route.query.data


1. path -> 是要跳转的路由路径,可以使路由文件里面配置的name值
2. params -> 是要传送的参数,直接以key:value形式传递,
3. query -> 是通过url来传递参数,同样以key:value形式传递
注意:接收参数时,是`this.$route`而非`this.$router`!!!

二、使用编程式导航 Router.push() 方法

在js代码中,我们可以通过使用 router.push() 方法来实现路由跳转,具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//发送
let data
this.$router.push({
name:'定义的需要跳转页面路由name值',
params:{
name:'name',
data:data
}
})

this.$router.push({
path:'selfPath',
query:{
name:'name',
data:data
}
})

//接收
let receiveParamData = this.$route.params.data
let receiveQueryData = this.$route.query.data

注意:如果传递参数使用的是params,那么必须使用目标页面路由的name;
如果传递参数使用的是query,那么必须使用目标页面路由的path。

三、小结

综上,声明式导航和编程式导航路由传值均可使用queryparams,那么这两者有什么区别呢?呐,queryparams就类似于 get 和 post ,query传参会将参数保存到url中,在页面刷新后传递的参数不会丢失,而params传参只会将参数保存在浏览器内存中,一旦刷新,浏览器释放内存,参数就丢失了。以上为个人理解,有不到位的地方还请指教~


本文结束啦感谢您的阅读

版权声明

Aurora's Notes by Xiao Peng is licensed under a Creative Commons BY-NC-ND 4.0 International License.
筱鹏创作并维护的Aurora's Notes博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
本文首发于Aurora's Notes 博客( http://wplll.com ),版权所有,侵权必究。

如果我的文章对你有很大帮助 那么不妨?