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'}}) 

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。