导航上的 Vue url 更改

Posted 2023-02-22

【中文标题】导航上的 Vue url 更改

【英文标题】：Vue url changes on navigation

【发布时间】：2019-02-28 10:32:49

【问题描述】：

我刚刚开始使用 Vue。我安装了@Vue/Cli（即版本 3）和 cli-init，所以我可以使用版本 2 的命令。为了创建我的项目，我使用了 vue init webpack 。 在浏览器上运行应用程序时，我注意到了奇怪的行为； 我的路线正在改变！

Initial Route"localhost:8080/"

Navigating to the route url 更改为“localhost:8080/#/”

Also with another route"localhost:8080/about"

Navigating to this route url 更改为“localhost:8080/about#/”

我不明白发生了什么。它虽然渲染了组件，但 url 只是改变了。 这是我的路线配置：

export default new Router(
  routes: [
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    ,
    
      path: '/about',
      name: 'AboutComponent',
      component: AboutComponent,
    ,
    
      path: '*',
      name: '404',
      component: HelloWorld,
    ,
  ],
);

没有路由器链接，我通过输入路径进行导航。 我的路由器设置是默认的。

【问题讨论】：

显示您的路由器链接以及您为路由器选择的模式？历史？

我没有使用路由器链接。我使用了默认设置。谢谢

【参考方案1】：

您可能可以通过阅读此处的 vue-router 文档 (https://router.vuejs.org/guide/essentials/history-mode.html) 自己回答问题

默认情况下 vue-router 在 hash 模式下工作。为了与旧浏览器兼容，浏览器中的路由会使用“哈希”进行更改。现在您可以安全地使用历史模式，并且您的 URL 在浏览器位置框中不会更改。

但是，我建议您阅读并充分了解客户端路由的工作原理以及使您的应用正常运行所需的服务器端配置。

欢迎使用 Vue.JS！

【讨论】：

哦，会的。谢谢你。与我的 Angular6 体验完全不同。

使用历史模式解决了这个问题。再次感谢您。