Vue路由传参页面刷新后参数丢失原因和解决办法
更新时间：2022年12月13日 11:41:47 作者：lonelysaber
这几天在开发中遇见的一个关于路由传参后,页面刷新数据丢失的问题,下面这篇文章主要给大家介绍了关于Vue路由传参页面刷新后参数丢失原因和解决办法,需要的朋友可以参考下
vue路由传参方法
在编写vue项目时，时常会使用路由在不同页面中传递参数，常见使用方式如下：
this.$router.push({
path: "/test",
query: {
a: 1,
b: 2
}
})这样我们就传递了两个参数，在 /test 页面 就可以接收这两个参数
let a = this.$route.query.a; let b = this.$route.query.b;
可以看到浏览器进行了url参数拼接传参，有点像get请求的意思
如果不想显示参数拼接在url中，可以使用parmars传参，同时path失效，需要用name指定路由，前提vueRouter中有name对应的路由，才能匹配对应的路径
this.$router.push({
name: "test",
params: {
a: 1,
b: 2
}
})接收参数方式 与query方式类似
let a = this.$route.parmars.a; let b = this.$route.parmars.b;
看起来有点像post请求
以上看起来一切正常，但是一旦传递的参数中包含对象之后，问题就出现了
原因分析：
参数传递变为了[object object] ，这个我们非常熟悉，是对象被强制转化为字符串的结果
恍然大悟！原来vue路由传值会把参数都转换为字符串进行拼接,相当于String(参数)
解决方案：
解决方案很简单，就是使用JSON
传递参数时将参数转化为JSON字符串
this.$router.push({
path: "/test",
query: {
a: JSON.stringify({test : 'test}),
b: 2
}
})接收时再转化为对象
let a = JSON.parse(this.$route.query.a); let b = this.$routr.query.b;
完美解决
总结
到此这篇关于Vue路由传参页面刷新后参数丢失原因和解决办法的文章就介绍到这了,更多相关Vue路由传参页面刷新参数丢失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了如何使用router-link对象方式传递参数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue+xlsx实现表格的导入导出功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要为大家介绍了petite vue的使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
写后台管理的时候会有很多列表以及相应的条件查询,下面这篇文章主要给大家介绍了关于Vue3使用Element Plus实现列表界面的方法步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要给大家介绍了关于VSCode中写Vue没有代码提示的解决步骤,代码提示功能能够大大的提高开发效率,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了v-model的基本用法解析，帮助大家更好的理解和学习vue v-model的使用方法，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了使用vue-router切换组件时使组件不销毁问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了Vue实现手机计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
Vite是一种新型前端构建工具,能够显著提升前端开发体验,下面这篇文章主要给大家介绍了关于Vue3+Vite项目按需自动导入配置以及一些常见问题修复的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了Vue.js实现简单ToDoList的前期准备,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论