vue路由去掉井号

要去掉 Vue 路由中的井号，需要使用 HTML5 History 模式。具体步骤如下：

1. 在 Vue Router 中，设置 mode 为 history。

2. 配置服务器，让所有请求都返回 index.html 文件。

3. 在 index.html 文件中，添加 base 标签，指定应用程序的基本路径。

示例代码如下：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

// 服务器配置
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});

// index.html 文件中，添加 base 标签
<base href="/">

这样就可以去掉路由中的井号了。

相关问题

vue路由跳转出现重复的路由

Vue Router 中出现重复路由的问题通常是由于以下原因导致的：

1. **配置错误**：在 `router.js` 文件中，如果两个或更多的路由配置了相同的路径（`path` 或者 `name`），这可能导致重复的导航。检查所有路由配置，确保每个路径只有一条。

2. **动态匹配**：动态路由可能会因为参数的不同而误认为是重复的。例如，`'/users/:id'` 和 `'/users/:userId'` 如果不加限制，可能会造成冲突。确保动态部分的命名一致并且解析规则明确。

3. **使用 `exact` 属性**：当你使用 `exact` 标志时，只有完全匹配才有效。如果没有设置，当路径包含父级路由的路径时，会被视为重复。考虑去掉 `exact` 或更改路径模式以避免这种覆盖。

4. **嵌套路由**：如果在子路由中定义了同名的路由，且父路由试图访问这个子路由，也可能会显示重复。确保嵌套结构清晰，避免路径层级混乱。

5. **全局守卫**：全局守卫如 `beforeEach` 可能意外地导致循环路由，特别是当它们改变当前路由并触发导航到新路由时。

要解决这个问题，你需要定位并修正具体的配置，确保每个路由都有唯一的标识，并避免上述情况的发生。如果需要进一步帮助，请提供详细的路由配置代码以便于分析。

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 } });