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

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

在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
   }
]

参考

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

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

在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

散列是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"。