Vue Router中如何获取query对象的特定值?

2026-05-22 11:061阅读0评论SEO教程
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计299个文字,预计阅读时间需要2分钟。

Vue Router中如何获取query对象的特定值?

在执行`$router.push()`时,若使用了query参数,跳转后可从query中获取相应参数。字符串类型数据无问题,但其他类型数据需注意,跳转前正常,跳转后可能发生变化。

在使用 $router.push() 时,如果使用了query,则可以在跳转后从query中获取到对应的参数

如果传的是字符串自然没问题,但是如果传的其他类型的数据,在跳转之前是正常的,而跳转之后再刷新一遍页面的话,query里面属性的值都会变成字符串

因为刷新后query的值是直接从页面URL中取的,而在页面URL上的参数只能是字符串类型

解决方法:

在传值之前把要传的参数单独放到一个对象里,再放到query里面,然后进行JSON.stringify()处理

到了目标页面后再进行JSON.parse()处理,还原为对象

优点:可以一次性处理多个参数,适用度高   例子: // this.$router.push({ path: "/video/detail", query: item });   // ({}).toString() => [object Object] // this.$router.push({ path: "/video/detail", query: { item } }); this.$router.push({ path: "/video/detail", query: { item: JSON.stringify(item) }, }); console.log(JSON.parse(this.$route.query.item));

搜索

Vue Router中如何获取query对象的特定值?

复制

本文共计299个文字,预计阅读时间需要2分钟。

Vue Router中如何获取query对象的特定值?

在执行`$router.push()`时,若使用了query参数,跳转后可从query中获取相应参数。字符串类型数据无问题,但其他类型数据需注意,跳转前正常,跳转后可能发生变化。

在使用 $router.push() 时,如果使用了query,则可以在跳转后从query中获取到对应的参数

如果传的是字符串自然没问题,但是如果传的其他类型的数据,在跳转之前是正常的,而跳转之后再刷新一遍页面的话,query里面属性的值都会变成字符串

因为刷新后query的值是直接从页面URL中取的,而在页面URL上的参数只能是字符串类型

解决方法:

在传值之前把要传的参数单独放到一个对象里,再放到query里面,然后进行JSON.stringify()处理

到了目标页面后再进行JSON.parse()处理,还原为对象

优点:可以一次性处理多个参数,适用度高   例子: // this.$router.push({ path: "/video/detail", query: item });   // ({}).toString() => [object Object] // this.$router.push({ path: "/video/detail", query: { item } }); this.$router.push({ path: "/video/detail", query: { item: JSON.stringify(item) }, }); console.log(JSON.parse(this.$route.query.item));

搜索

Vue Router中如何获取query对象的特定值?

复制