Vue3中vue-router如何去除URL的/#/前缀并保留自定义路径大小写

API 探路者

2026-10-3

问题原因

你当前访问的URL自带#是因为使用了vue-router的哈希历史模式createWebHashHistory，该模式下所有路由路径都会作为哈希值拼接在域名后，不会触发浏览器页面重载，但无法和你配置的路径完全一致。

解决方案

Vue3版本下直接将哈希模式替换为HTML5历史模式即可，修改router/index.js文件如下：

导入的API从createWebHashHistory替换为createWebHistory
修改createRouter配置中的history参数对应值

修改后的完整代码：

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () =>
      import('../views/Home.vue'),
    meta: { title: 'Home', description: 'Foo bar.' }
  },
  {
    path: '/About',
    name: 'About',
    component: () =>
      import('../views/About.vue'),
    meta: { title: 'About', description: 'Lorem ipsum.' }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router