在组件上的Vue 3中获取URL查询参数

在Vue 3中，可以通过使用内置的$route对象来获取URL查询参数。$route对象是Vue Router提供的一个全局对象，它包含了当前路由的各种信息，包括URL查询参数。

要获取URL查询参数，可以使用$route对象的query属性。该属性是一个包含URL查询参数的对象，键是参数名，值是参数的值。可以通过访问query对象的属性来获取指定参数的值。

以下是一个示例代码，展示如何在Vue 3中获取URL查询参数：

<template>
  <div>
    <p>URL查询参数foo的值为: {{ queryParams.foo }}</p>
    <p>URL查询参数bar的值为: {{ queryParams.bar }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {} // 存储查询参数的对象
    };
  },
  mounted() {
    // 在组件挂载后，获取URL查询参数并存储在queryParams对象中
    this.queryParams = this.$route.query;
  }
};
</script>

在上述代码中，mounted钩子函数会在组件挂载后被调用，此时可以访问$route对象并从中获取URL查询参数。将查询参数存储在组件的data中，就可以在模板中使用这些参数了。

当URL中存在名为foo和bar的查询参数时，模板中展示的内容就会包含这些参数的值。

需要注意的是，为了使用Vue Router获取URL查询参数，需要先安装并配置Vue Router。Vue Router是Vue.js官方的路由管理器，可以用于实现单页面应用的路由功能。

推荐的腾讯云相关产品：腾讯云云服务器CVM、腾讯云轻量应用服务器、腾讯云云数据库MySQL、腾讯云COS对象存储。

腾讯云产品介绍链接地址：

• 腾讯云云服务器CVM：https://cloud.tencent.com/product/cvm
• 腾讯云轻量应用服务器：https://cloud.tencent.com/product/lighthouse
• 腾讯云云数据库MySQL：https://cloud.tencent.com/product/cdb
• 腾讯云COS对象存储：https://cloud.tencent.com/product/cos