上面的几个很好的描述把我带进了兔子洞，直到我意识到“createWebHistory”取代了“createWebHashHistory”存在于router/index.js文件的两个地方。一次是在文件末尾的常量定义中，一次是在文件顶部的vue-router导入中。

在router/index.js文件的末尾找到

  const router = createRouter({
    mode: 'history',
    history: createWebHistory(),
    // history: createWebHashHistory(),
    routes
  })

router/index.js文件的第一行

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

现在它就像一个魅力，感谢上面所有的人指引我走上这条成功之路!

vue-router使用哈希模式，简单地说，它是您通常期望从这样的achor标记中得到的东西。

<a href="#some_section">link<a>

使散列消失

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
] // Routes Array
const router = new VueRouter({
  mode: 'history', // Add this line
  routes
})

警告:如果您没有正确配置服务器，或者您正在使用客户端SPA用户，可能会得到404错误 如果他们试图直接从浏览器访问https://website.com/posts/3。 Vue路由器文档

在Vue 3中，您可以使用Vue -router包提供的createWebHistory模块来获得一个干净的URL。

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

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

还有另一个模块在名为createWebHashHistory的URL中保存“#”符号，它帮助浏览器导航到特定的元素。

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

const router = createRouter({
  history: createWebHashHistory(),
  // ...
})

如果你不想在URL中使用'#'符号，你可能更喜欢使用createWebHistory而不是createWebHashHistory。

要了解更多信息，请查看他们的文档: https://router.vuejs.org/guide/essentials/history-mode.html

vue-router的默认模式是哈希模式——它使用URL哈希来模拟完整的URL，这样当URL更改时页面就不会被重新加载。 为了摆脱散列，我们可以使用路由器的历史模式，它利用了历史。pushState API实现URL导航，而不需要重新加载页面:

import {routes} from './routes'; //import the routes from routes.js    

const router = new VueRouter({
    routes,
    mode: "history",
});

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

routes.js

import ComponentName from './ComponentName';

export const routes = [
   {
      path:'/your-path'
      component:ComponentName
   }
]

参考

只需将router.js文件中的createWebHashHistory替换为createWebHistory

对于Vuejs 2.5和vue-router 3.0，以上都不适合我，但是在玩了一会儿之后，以下似乎是有效的:

export default new Router({
  mode: 'history',
  hash: false,
  routes: [
  ...
    ,
    { path: '*', redirect: '/' }, // catch all use case
  ],
})

注意，您还需要添加catch-all路径。