如何从 vue-router URL 中删除主题标签（#）？答案

【问题标题】：How to remove hashtag(#) from vue-router URL?如何从 vue-router URL 中删除主题标签（#）？
【发布时间】：2018-05-16 16:57:16
【问题描述】：

我想从 url 中删除 hashtag(#)，但我还需要保存 no-reload 模式。我可以这样做吗？

我有：page.com/#/home 我要：page.com/home

我试过mode: 'history'，但页面会用它重新加载。
UPD：是否可以在不重新加载页面和使用普通 URL 的情况下创建 SPA 应用程序？

【问题讨论】：

How to remove hashbang from url?的可能重复
（mode:history 是对的；你是否也做了here 描述的服务器端配置？）
@DanielBeck mode:history 即使我配置了它也不重新加载页面吗？
no-reload 模式是什么意思？历史模式只是更改没有哈希的 URL。如果您随后手动重新加载页面，您将看到 404，因为浏览器实际上请求生成的 URL。因此，您需要将服务器配置为在服务器的每个 URL 上提供您的 SPA 的index.html。
您不应该使用原生 <a> 标签从一条路由路由到另一条路由。这仅适用于 # 并且仅因为浏览器对片段标识符的原始行为和处理。看我的回答。

标签： vue.js

【解决方案1】：

开启历史模式时，需要先根据the documentation配置你的服务器。原因是，历史模式只是改变了当前页面的 URL。当用户实际重新加载页面时，他会收到404 错误，因为请求的 URL 实际上并不存在。将服务器重新配置为始终为您的 SPA 的主要 index.html 提供服务可以解决此问题。

当在 URL 中使用 #（无历史模式）时，浏览器会尝试导航到 ID 位于 # 之后的元素（在同一文档中）。这是片段标识符的原始行为。因此，如果您使用这样的片段标识符添加指向 HTML 的链接，浏览器将不会重新加载页面，而是实际在文档中查找 ID。 vue-router 会监视此更改并将您路由到正确的路由。这就是它与哈希一起工作的原因。如果您只是将常规 URL 添加到 HTML，则浏览器的本机行为是实际导航到该页面（硬链接）。这会导致您体验到重新加载效果。

处理这个问题的方法是，永远不要使用常规链接在 Vue 单页应用程序中进行路由。使用标签 <router-link> 在一个页面和另一个页面之间进行路由（但仅限于 SPA 内）。无论浏览器是否允许使用# 导航而不重新加载，这都是要走的路。以下是推荐路由标签的文档：link

您还可以以编程方式从一条路线路由到另一条路线。为此使用$router.push()。这是相关文档：link

【讨论】：