vue3获取query参数

Vue 3 可以通过使用`$route`对象来获取查询参数。

在Vue 3中，`$route`对象提供了很多有用的信息，包括当前路由的路径、参数和查询参数等。其中，查询参数可以通过`$route.query`来访问。

例如，如果当前路由是`/example?foo=bar&baz=qux`，我们可以通过以下代码来获取查询参数：

export default {
  mounted() {
    // 获取所有查询参数
    console.log(this.$route.query); // 输出：{ foo: 'bar', baz: 'qux' }

    // 获取特定的查询参数
    console.log(this.$route.query.foo); // 输出：'bar'
    console.log(this.$route.query.baz); // 输出：'qux'
  }
}

在上面的代码中，`this.$route.query` 返回一个包含所有查询参数的对象，我们可以通过对象的属性来访问特定的查询参数。

对于带有多个相同名称的查询参数，`this.$route.query` 返回一个数组。例如，如果路由是`/example?foo=bar&foo=baz`，那么`this.$route.query.foo`将返回一个包含`['bar', 'baz']`的数组。

需要注意的是，如果没有查询参数，`this.$route.query` 将返回一个空对象`{}`。因此，在处理查询参数之前，我们需要对其进行有效性检查。

以上就是在Vue 3中获取查询参数的方法。希望能对你有所帮助！