防止在 VueJs 中浏览器 url 中的位置更改答案

【问题标题】：Prevent location change in browser url in VueJs防止在 VueJs 中浏览器 url 中的位置更改
【发布时间】：2018-11-10 07:50:00
【问题描述】：

我有一个 vuejs 应用程序，我在其中对后端进行 rest api 调用。我已经定义了路由器并导航了不同的组件。现在，当我导航时，我在浏览器 URL 中看到了 https://domain-name.com/#/abc 路由路径。我想防止这种情况发生，以便它始终显示https://domain-name.com/，而不管我经过什么路径。有没有办法在 Vuejs 或任何其他解决方案中做到这一点。感谢您的帮助！

谢谢，拉胡尔

【问题讨论】：

标签： javascript html vue.js vue-router

【解决方案1】：

你正在使用 Vue Router，它的想法是改变路由......

由于您在路由器下的 url 中有哈希，您需要添加 mode 属性。

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

这将删除/#/someRoute，它将变成/someRoute

添加历史模式后，您需要分别设置 apache/nginx 服务器以反映用户是否输入 domain.com/someRoute 他们将不会收到任何信息，我们可以修复 here。

如果您希望链接永久保留为 www.domain.com 而不是使用 vue-router，则必须在需要时更改组件，实际上页面上有一百万零一个 if 语句。

【讨论】：

感谢您的评论。为了删除 /#/ 我已经使用了历史模式，但我需要的路径始终是 www.domain.com。我想以一种干净的方式来做。我知道在 Angular 中，我们可以通过将 skipLocationChange 设置为 true 来实现。认为在 Vue 中也会有类似的东西。但是看起来在Vue中实现起来相当困难
使用mode: 'abstract' 会给你想要的结果吗？
使用模式：''abstract' 主页本身没有加载，我得到一个空白页。
我认为问题在于您使用的是专门为路由而设计的库，以直接违反其规则。您需要创建参数来说明您需要在任何给定点加载哪个组件。

【解决方案2】：

您可以使用alias

/a 的别名为/b 表示当用户访问/b 时，URL 保持不变 /b，但它会像用户访问 /a 一样匹配。

以上在路由配置中可以表示为：

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

所以，在你的情况下

const router = new VueRouter({
  routes: [
  // the URL will remains https://domain-name.com/
    { path: '/abc', component: ABC, alias: '/' }
    { path: '/def', component: DEF, alias: '/' }
  ]
})

【讨论】：