vue获取路由query参数

作者：殇丶離別发布日期:2025-07-04 浏览:105

// 在 Vue 中获取路由的 query 参数非常简单，可以通过 this.$route.query 来访问。

// 假设你的路由是 /page?name=vue&version=3.0

// 在你的 Vue 组件中：

export default {
  mounted() {
    // 获取所有 query 参数
    console.log(this.$route.query); 
    // 输出: { name: 'vue', version: '3.0' }

    // 获取单个 query 参数
    const name = this.$route.query.name;
    console.log(name); 
    // 输出: vue

    const version = this.$route.query.version;
    console.log(version); 
    // 输出: 3.0
  }
}

解释说明：

this.$route.query：这是 Vue Router 提供的一个对象，包含了当前 URL 中的所有查询参数。
this.$route.query.<parameter>：你可以通过指定参数名来获取单个查询参数的值。例如，this.$route.query.name 会返回 name 查询参数的值。

如果你需要监听查询参数的变化，可以使用 watch 或者 beforeRouteUpdate 导航守卫。

上一篇：vue3 select

下一篇：vue+vite