Vue webpack 正在向所有 URL 添加 #/

Question

我正在关注一些使用 Vue 项目的项目vue init webpack test，但似乎在运行时npm run dev，#/所有 url都会附加一个。

当我创建一个新组件并路由到它时也是如此。如果我做类似的事情http://localhost:8080/newpath，它就会变成http://localhost:8080/newpath#/.

是否有我可以设置的配置变量，以便#/不附加到每个 URL？使用正则表达式在每个 URL 上删除它似乎非常笨拙。

我不包括任何实际的源代码，因为它来自 vue init 创建的 HelloWorld 应用程序。

我正在使用 vue cli 3 的最新版本。

Answer 1

来自HTML5 History Mode的文档：

vue-router 的默认模式是哈希模式——它使用 URL 哈希来模拟完整的 URL，这样当 URL 更改时页面不会重新加载。

所以你需要改变你的 Vue 路由器以使用 HTML5 历史模式：

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

还请继续阅读除此之外的文档，因为您需要调整实际服务器配置以支持此模式，以便用户在将地址栏 URL 复制并粘贴到新选项卡时将被发送到适当的位置。