vue3 路由中去掉路径上的query参数

在 Vue3 中，如果你想要从路由路径中移除 query 参数（URL 后面 `?` 开始的部分），你可以通过修改路由配置来实现这个需求。通常，Vue Router 提供了动态路由匹配和查询参数获取的功能。

首先，在定义动态路由时，可以使用冒号 `:` 来捕获动态部分，而不是整个路径，例如：

// 原来的带 query 参数的路由
{ path: '/users/:id', name: 'UserDetail', component: UserDetail },

如果你想移除查询参数，可以创建一个新的路由规则，只处理基本路径：

// 移除 query 参数后的路由
{ path: '/users/:id', component: UserDetail, // 不再包含 query 部分
  meta: { queryParams: false } // 或者设置一个标志表示不处理 query
}

然后，在组件内部，如果你仍然需要访问参数，可以使用 `useRoute()` API 获取当前路由实例，它会自动过滤掉 query 参数：

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = route.params.id; // 只获取 id 部分
    // ...
  }
}

如果确实不需要在 URL 上显示查询参数，可以在路由跳转时直接传递参数到组件里，避免在 URL 显示它们：

this.$router.push({ path: '/users/:id', params: { id: someId } });