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路由传参页面刷新参数丢失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue mock.js模拟数据实现首页导航与左侧菜单功能，mockjs是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求，返回设定好的数据2022-09-09
在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,下面这篇文章主要给大家介绍了关于Vue中引入第三方JS库的详细步骤,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了快速修改antd vue单个组件的默认样式方式，具有很好的参考价值，希望对大家有所帮助。2022-08-08
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
这篇文章主要介绍了vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要为大家详细介绍了基于Vue.js实现tab滑块效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
今天小编就为大家分享一篇vue获取data数据改变前后的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
随着单页面应用程序(SPA)的日益流行,前端开发逐渐向复杂且交互性强的方向发展,在这个过程中,Vue.js及其生态圈的工具（如Vue Router）为我们提供了强大的支持,本文将介绍如何在Vue 3中使用Vue Router实现动态路由导航,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue深度监听(监听对象和数组的改变)与立即执行监听实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要为大家详细介绍了vue项目实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要介绍了Vue中Vue.extend()的使用及解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论