vue跳转路由时的传参方式（query和params的区别）

最新推荐文章于 2024-09-07 18:47:11 发布

喜欢读书的三金

最新推荐文章于 2024-09-07 18:47:11 发布

阅读量991

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46185369/article/details/121169728

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.通过query传参

在这里插入图片描述
获取：this.$route.query.username

2.通过params传参，必须通过命名路由的方式传递

在这里插入图片描述
获取：this.$route.params.username

区别：

params传参，必须通过命名路由的方式传值
params传参，不会显示在地址栏中，刷新会丢失
可以配合localStorage使用
（1）A 跳转路由到 B，params传参
（2）B页面中，立即通过 this. $r o u t e . p a r a m s 获取参数（获取参数的逻辑，优先从$ route拿，如果拿不到，说明刷新了，从本地取即可）
（3）拿到参数后，立即存到本地
（4）实现功能…

B页面的逻辑代码：

Created(){
	let username=this.$route.params.username
	if(username){
		// 刚跳过来，有参数，立即存起来
		localStorage.setItem('myParams',JSON.stringify(this.$route.params))
	} else {
		// 没参数，说明用户刷新了，params丢失了，本地拿
		username=JSON.parse(localStorage.getItem('myParams')).username
	}
}