Vue3使用createWebHistory仍有#符号，如何移除URL中的#？

从你提供的路由代码来看，createWebHistory的调用写法是正确的，但URL仍保留#，可以从以下几个方面排查解决：

1. 确认路由导入语句是否正确 #

检查router文件顶部的导入代码，必须确保导入的是createWebHistory而非createWebHashHistory：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

如果误导入了createWebHashHistory，即便实例化时写createWebHistory也不会生效，这是最常见的疏漏点。

2. 验证process.env.BASE_URL的有效性 #

在路由实例创建前打印process.env.BASE_URL的值，确认其为预期的基础路径（开发环境通常为/）：

console.log(process.env.BASE_URL) // 开发环境应输出 "/"
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

如果BASE_URL为空或异常值，可能导致路由自动 fallback 到hash模式。

3. 检查是否存在代码覆盖或第三方干扰 #

确认路由实例创建后，没有其他代码修改路由的history模式，也没有第三方插件（如权限控制、埋点工具）强制切换为hash模式。

4. 规范路由配置（非直接原因，但建议修正） #

你的子路由path写为/projects，虽然不影响功能，但不符合嵌套路由的规范。父路由已设置path: "/"，子路由应去掉开头的/，写成"projects"，路由会自动拼接为/projects：

children: [
  {
    path: "projects", // 去掉开头的/
    name: "projects",
    component: () => import("@/views/projects/index.vue"),
  },
],

最后操作 #

• 清理浏览器缓存，重启开发服务器
• 手动去掉地址栏中的#后刷新页面，确认路由是否正常切换为history模式

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