如何在Vue.js中匹配带查询字符串的动态路由？

嘿，这个问题其实挺常见的——Vue Router确实不需要你在路由规则里专门定义查询参数的匹配规则，因为查询参数属于路由的“额外信息”，不是路径的一部分，所以不需要像动态路径参数（比如/mycoolapp/:id）那样提前声明。

具体怎么做？ #

1. 正常配置路由

不管URL有没有带查询参数，你只需要按常规方式配置你的路由路径就行：

// Vue Router 配置示例
const routes = [
  { 
    path: '/mycoolapp', 
    component: MyCoolApp // 你的组件
  }
];

这样一来，/mycoolapp、/mycoolapp?someid=123甚至/mycoolapp?someid=123&other=456都会匹配到这个路由。

2. 在组件中获取查询参数

你可以通过路由实例轻松拿到查询参数：

• Vue 2（选项式API）：

export default {
  mounted() {
    // 获取someid参数
    const someId = this.$route.query.someid;
    console.log('当前someid:', someId); // 输出123
  }
}

• Vue 3（组合式API）：

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const someId = route.query.someid;
    console.log('当前someid:', someId); // 输出123
    return { someId };
  }
}

3. 监听查询参数变化

如果用户在同一个页面修改了查询参数（比如从?someid=123改成?someid=456），你可能需要监听变化来更新页面内容：

• Vue 2：

export default {
  watch: {
    '$route.query'(newQuery, oldQuery) {
      // 当查询参数变化时触发
      console.log('someid更新为:', newQuery.someid);
      // 这里可以写数据更新逻辑，比如重新请求接口
    }
  }
}

• Vue 3：

import { useRoute, watch } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    watch(
      () => route.query.someid,
      (newId) => {
        console.log('someid更新为:', newId);
        // 执行数据更新逻辑
      }
    );
  }
}

为什么官方文档没专门提这个？ #

因为查询参数不属于「动态路径匹配」的范畴——动态路径匹配是针对URL路径里的变量（比如/user/:id这种嵌入在路径里的参数），而查询参数是附加在路径之后的独立参数，Vue Router默认就会自动解析并挂载到$route.query（或route.query）上，所以不需要额外配置路由规则。

内容的提问来源于stack exchange，提问作者Toskan