window.router = new VueRouter({
   hashbang: false,
   //abstract: true,
  history: true,
    mode: 'html5',
  linkActiveClass: 'active',
  transitionOnLoad: true,
  root: '/'
});

服务器配置正确 在apache你应该写url重写

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

引用文档。

vue-router的默认模式是哈希模式-它使用URL哈希来 模拟一个完整的URL，这样页面将不会被重新加载的URL 的变化。 为了摆脱散列，我们可以使用路由器的历史模式 利用历史。pushState API实现URL导航 页面重载:

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

When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful! Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly. Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

上面的几个很好的描述把我带进了兔子洞，直到我意识到“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模式的默认设置，之所以设置它是因为使用散列，应用程序不需要连接服务器来提供url。要改变它，你应该配置你的服务器，并将模式设置为HTML5 History API模式。

对于服务器配置，这是帮助你设置Apache, Nginx和Node.js服务器的链接:

https://router.vuejs.org/guide/essentials/history-mode.html

然后你应该确保，vue路由器模式设置如下:

Vue-router version 2.x

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

需要明确的是，这些都是你可以选择的vue-router模式:"hash" | "history" | "abstract"。

对于Vue 3，更改如下:

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

对此:

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

来源:https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode

对于vue.js 2，使用以下方法:

const router = new VueRouter({
 mode: 'history'
})