Vue router的query对象里的值的问题

在使用 $router.push() 时,如果使用了query,则可以在跳转后从query中获取到对应的参数。如果传的是字符串自然没问题,但是如果传的其他类型的数据,在跳转之后是正常的,而跳转之后再刷新一遍页面的话,query里面的属性的值都会变成字符串。例如:

this.$router.push({ name:'product', query: {canSee: false} });

  最初跳转之后,this.$route.query.canSee打印的值是Boolean类型的。然后刷新一下,值就变成了String类型了。个人猜测是因为刷新后query的值是直接从页面URL中取的,而在页面URL上的参数的类型只能是字符串类型。

解决方法

  1. 在传值之前把要传的参数单独放到一个对象里,在放到query里面,然后进行JSON.stringify()处理,到了目标页面后再进行JSON.parse()处理,还原对象。这种方法的好处是可以一次性处理多个参数,而且适用度高,建议使用这种方法。

  2. 传值前不做处理,到了目标页面后再单独对原本为非字符串的数据进行JSON.parse()处理。缺点是字符串类型的数据不能如此处理,要确保该数据不是字符串类型的。局限性大,不推荐适用。

 

相关文章:router路由跳转使用query传递参数刷新后数据无法获取

posted @ 2019-06-13 11:23  梦游攸攸  阅读(7376)  评论(0编辑  收藏  举报