打开src->router->index.js文件

在这个文件的底部:

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

在Vue 3中，你需要使用createWebHistory作为历史选项。

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

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

在Vue 2中，你需要将模式设置为“历史”。

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

但是，请确保您的服务器配置为处理这些链接。 https://router.vuejs.org/guide/essentials/history-mode.html

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 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-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!

你应该添加模式历史到你的路由器如下所示

export default new Router({
  mode: 'history',
  routes: [
    {
     ...
    }
  ]
})