Vue 路由实现原理

Question

结果：通过更改url地址来更新视图，但是不重新请求页面。

实现：浏览器环境两种（hash 和 history），node 环境一种（abstract）。

hash

hash("#") 的作用是加载 URL 中指示网页中的位置。# 本身以及它后面的字符称为 hash，可通过 window.location.hash 获取。hash 不会在 http 请求中，对服务端无用，只是用来指导浏览器动作的。所以改变 hash 不会重新加载页面。而且 hash 的改变可以通过 hashchange 事件进行监听。HashHistory 拥有两个方法，一个是 push（将新路由放到浏览历史栈顶）， 一个是 replace（新路由替代当前路由）

$router.push() //调用方法
HashHistory.push() //根据hash模式调用,设置hash并添加到浏览器历史记录（添加到栈顶）（window.location.hash= XXX）
History.transitionTo() //监测更新，更新则调用History.updateRoute()
History.updateRoute() //更新路由
{app._route= route} //替换当前app路由
vm.render() //更新视图

history

从 HTML5 开始，History interface 提供了 2 个新的方法：pushState()、replaceState() 使得我们可以对浏览器历史记录栈进行修改，通过 back()、forward()、go() 等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。

• stateObject：当浏览器跳转到新的状态时，将触发 Popstate 事件，该事件将携带这个 stateObject 参数的副本
• title：所添加记录的标题。
• url：所添加记录的 url。

这2个方法有个共同的特点：当调用他们修改浏览器历史栈后，虽然 url 改变了，但浏览器不会立即发送请求该 url，这就为单页应用前端路由，更新视图但不重新请求页面提供了基础。

window.history.pushState(stateObject,title,url)
window.history.replaceState(stateObject,title,url)

与 hash 模式做比较：

1.push

只是将 window.hash 改为 history.pushState

2.replace

只是将 window.replace 改为 history.replaceState

3.监听地址变化

在 HTML5History 的构造函数中监听 popState（window.onpopstate）