vue-router中query取值的坑及解决
更新时间：2024年08月08日 08:59:48 作者：绝美焦栖
这篇文章主要介绍了vue-router中query取值的坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue-router中query取值的坑
问题描述
在使用 $router.push() 时，使用了query，传的是Boolean类型的数据，但是query里面的属性的值都会变成字符串。
this.$router.push({ name:'product', query: {canSee: false} });query的值是直接从页面URL中取的，而在页面URL上的参数的类型只能是字符串类型。
解决方案
1.在传值之前把要传的参数单独放到一个对象里，在放到query里面，然后进行JSON.stringify()处理，到了目标页面后再进行JSON.parse()处理，还原对象。这种方法的好处是可以一次性处理多个参数，而且适用度高，建议使用这种方法。
2. 传值前不做处理，到了目标页面后再单独对原本为非字符串的数据进行JSON.parse()处理。缺点是字符串类型的数据不能如此处理，要确保该数据不是字符串类型的。局限性大，不推荐适用。
vue-router query,parmas,meta传参
1.query，显示在导航栏？后，相当于get请求传参
this.router.push({path:'/login',query:{ 'redirect':'/home'}})
this.router.push({name:'Login',query:{ 'redirect':'/home'}})2.parmas，不会显示，相当于post请求传参， 目前测试没有query不行，而且刷新后消失
this.router.push({name:'Login',parmas:{ 'redirect':'/home'}})
this.router.push({name:'Login',query:{ 'redirect':'/home'}},parmas:{ 'redirect':'/home'}})在vue中使用parmas传参时必须用name跳转，而且必须和query一起传？否则接收不到；或者路由中有设置/:XX来接收这个参数
3.meta，不显示，测试失败
this.router.push({name:'Login',meta:{ 'redirect':'/home'}}) 总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue如何在无后端配合的情况下实现导出功能,文中的示例代码简洁易懂,有需要的小伙伴可以跟随小编一起了解一下2024-01-01
下面小编就为大家分享一篇Vue 拦截器对token过期处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
Vue router-view和router-link的实现原理
这篇文章主要介绍了Vue router-view和router-link的实现原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要给大家介绍了关于如何启动node.js文件的3个方法,文中通过图文以及实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
在Vue中我们可以使用ref属性来获取子组件的实例对象,这个功能非常方便,这篇文章主要给大家介绍了关于Vue获取子组件实例对象ref属性的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了3分钟了解vue数据劫持的原理实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
Vue3 Element Plus el-form表单组件示例详解
这篇文章主要介绍了Vue3 Element Plus el-form表单组件,Element Plus 是 ElementUI 的升级版，提供了更多的表单控件和功能，同时还改进了一些细节和样式，本文结合示例代码给大家详细讲解，需要的朋友可以参考下2023-04-04
单向数据流方式使用一个上传数据流和一个下传数据流进行双向数据通信,两个数据流之间相互独立,下面这篇文章主要给大家介绍了关于vue单向数据流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了vue实现移动端返回顶部，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能,开始时间、结束时间可配置，根据当前时间初始化位置，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
最新评论