Vue-Router 源码深度剖析：篇五

在哈希模式下，当通过 this.$router.push 方法或点击 router-link 标签进行路由跳转时，浏览器的哈希值会随之改变。与此同时，当点击浏览器的后退或前进按钮时，当前的哈希路径会被替换为上一次或下一次的哈希值。

这一跳转过程实际上是由 VueRouter 类的实例方法 push 触发的，而 push 方法最终调用的是 this.history.push，也就是浏览器原生提供的历史记录修改方法。

浏览器历史记录管理

浏览器历史记录管理 是浏览器提供的一项重要功能，它允许用户在浏览网页时前进或后退到之前访问过的页面。这一功能是由浏览器内部的一个历史记录堆栈实现的，该堆栈记录了用户访问过的页面及其对应的哈希值或 URL。

当用户点击浏览器的后退或前进按钮时，浏览器会从历史记录堆栈中弹出或压入一条记录，从而实现页面的跳转。在哈希模式下，浏览器的历史记录堆栈中存储的是哈希值。

Vue-Router 的历史记录管理

在 Vue-Router 中，对浏览器历史记录的管理主要通过 history 属性实现的。history 属性是一个实例化的 VueRouter 对象，它提供了对浏览器历史记录堆栈的访问和操作。

VueRouter 提供了多种方法来修改浏览器历史记录，包括 push、replace 和 go 等。其中，push 方法用于在历史记录堆栈中添加一条新的记录，replace 方法用于替换当前的历史记录，而 go 方法用于在历史记录堆栈中前进或后退指定数量的记录。

哈希模式下的跳转过程

在哈希模式下，Vue-Router 通过监听哈希值的改变来实现路由跳转。当调用 this.$router.push 方法或点击 router-link 标签时，Vue-Router 会通过 history.pushState 方法更新浏览器的历史记录堆栈，并将新的哈希值压入堆栈。

与此同时，Vue-Router 会触发一个 hashchange 事件，并通过监听该事件来更新当前的路由状态。当点击浏览器的后退或前进按钮时，Vue-Router 会从历史记录堆栈中弹出或压入一条记录，从而实现页面的跳转，并触发相应的 hashchange 事件。

总结

在哈希模式下，Vue-Router 通过修改浏览器的历史记录堆栈来实现路由跳转。当调用 this.$router.push 方法或点击 router-link 标签时，Vue-Router 会将新的哈希值压入历史记录堆栈，并触发 hashchange 事件。当点击浏览器的后退或前进按钮时，Vue-Router 会从历史记录堆栈中弹出或压入一条记录，从而实现页面的跳转，并触发相应的 hashchange 事件。