vue 路由的实现原理分析：hash 模式和 history模式

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

---

一、Vue Router 的两种路由模式

1. 哈希模式（Hash Mode）

   • 默认模式，URL 结构包含哈希符号 #，例如：http://example.com/#/home。
   • 利用 window.location.hash 来跟踪路由变化，浏览器会自动处理哈希的变化而不触发页面重载。
   • 因为哈希值只影响浏览器的历史记录而不发送到服务器，所以无需后端配合即可实现前端路由。
   • SEO 性能较差，因为搜索引擎通常不会抓取哈希值后面的路径内容。

2. 历史模式（History Mode）

   • 利用了 HTML5 的 History API，如 window.history.pushState() 和 window.onpopstate 事件。
   • 在此模式下，URL 不包含哈希，呈现常规的路径结构，例如：http://example.com/home。
   • 为了实现前进、后退按钮的正常工作以及防止直接访问某个路由导致404错误，需要在服务器端进行适当的配置，将所有的请求都指向应用程序的入口文件，以便 Vue Router 能够接管并解析正确的路由。
   • 历史模式提高了用户体验，URL 易于阅读，也更利于 SEO。

二、vue的 hash 模式的实现原理

Vue Router 中的 Hash 模式利用了浏览器对 #（哈希）符号的特殊处理方式来模拟前端路由。其实现原理主要包括以下几个要点：

1. URL 结构：
   在 Hash 模式下，URL 包含一个哈希（#）符号，紧接着是路由信息。例如：http://example.com/#/home，/home 就是路由路径，位于哈希后面。

2. 浏览器行为：
   当用户点击链接或通过 JavaScript 改变 URL 的哈希部分时，浏览器并不会真正发起 HTTP 请求去服务器获取新内容，而是仅滚动到页面内与哈希值相对应的元素（通常用于页面内部锚点定位），或者在单页应用中，开发者可以通过监听 hashchange 事件来捕获这个变化。

3. Vue Router 监听：
   Vue Router 在启动时会监听 window 对象上的 hashchange 事件。当哈希值发生改变时，Vue Router 解析新的哈希值，并根据它匹配已定义的路由表，决定应该激活哪个路由以及渲染对应的组件。

4. 路由更新：
   当匹配到新的路由时，Vue Router 更新内部的路由状态，并通知 Vue 组件进行相应视图的更新。这意味着尽管 URL 更改了，但实际上并没有整个页面刷新，而是局部视图进行了切换，实现了 SPA（Single Page Application，单页面应用程序）的无刷新跳转效果。

总之，在 Vue Router 的 Hash 模式中，它借助浏览器原生对哈希变化的支持来实现在客户端层面的路由管理和页面内容切换，避免了不必要的服务器通信。

三、vue的History 模式的实现原理

Vue Router 的 History 模式的实现原理主要基于 HTML5 的 History API，主要包括以下几个核心方法：

1. pushState()：

   • history.pushState(state, title, url) 方法允许开发者在浏览器的历史记录栈中添加一个新的记录，同时更新当前 URL。这里的 state 参数用于存储任意类型的数据，标题 title 在现代浏览器中已废弃不用，实际操作时一般传空字符串，url 是即将改变的新路径，它会在地址栏显示，但不触发页面刷新。

2. replaceState()：

   • 类似于 pushState(), history.replaceState(state, title, url) 方法也会修改当前 URL，但它并不会新增一条历史记录，而是替换当前历史记录条目。

3. popstate 事件：

   • 当浏览器的前进、后退按钮被点击或者调用 history.back()、history.forward()、history.go() 方法时，浏览器会触发 popstate 事件。Vue Router 监听这个事件，从而得知当前 URL 的变化并相应地切换路由和组件。

在 Vue Router 的 History 模式下，当用户点击一个路由链接或者通过编程方式调用 router.push('/new-path') 时，Vue Router 不是简单地更改地址栏的哈希值，而是使用 pushState() 或 replaceState() 更新浏览器的历史记录和当前 URL。同时，Vue Router 通过监听 popstate 事件来捕获浏览器的前进后退操作，并根据新的 URL 计算出对应的路由，进而动态加载对应的组件，实现了无刷新页面跳转和保持应用状态的同时，让 URL 地址呈现出标准的、不含哈希的路径形式。

为了使这一模式在所有环境下都能正常工作，特别是对于服务器端，还需要确保服务器能够正确地处理所有路由请求，将其重定向到应用的入口点，这样前端应用才能依据 URL 进行恰当的路由匹配和组件渲染。