浅析vue-router实现原理及两种模式

定义了响应式的_route。所谓响应式属性，即当_route值改变时，会自动调用Vue实例的render()方法，更新视图。vm.render()是根据当前的 _route 的path，name等属性，来将路由对应的组件渲染到. 所以总结下来，从路由改变到视图的更新流程如下：

this.$router.push(path)
 -->
HashHistory.push()
-->
History.transitionTo()
-->
const route = this.router.match(location, this.current)会进行地址匹配，得到一个对应当前地址的route(路由信息对象)
-->
History.updateRoute(route)
 -->
 app._route=route (Vue实例的_route改变) 由于_route属性是采用vue的数据劫持，当_route的值改变时，会执行响应的render( )
-- >
vm.render() 具体是在<router-view></router-view> 中render
 -->
window.location.hash = route.fullpath (浏览器地址栏显示新的路由的path)

HashHistory.replace()

说完了HashHistory.push()，该说HashHistory.replace()了。

replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
 this.transitionTo(location, route => {
 replaceHash(route.fullPath)
 onComplete && onComplete(route)
 }, onAbort)
}
function replaceHash (path) {
 const i = window.location.href.indexOf('#')
 window.location.replace(
 window.location.href.slice(0, i >= 0 ? i : 0) + '#' + path
 )
}

可以看出来，HashHistory.replace它与push()的实现结构上基本相似，不同点在于它不是直接对

window.location.hash

进行赋值，而是调用window.location.replace方法将路由进行替换。这样不会将新路由添加到浏览器访问历史的栈顶，而是替换掉当前的路由。

监听地址栏

可以看出来，上面的过程都是在代码内部进行路由的改变的，比如项目中常见的

this.$router.push(), 

等方法。然后将浏览器的地址栏置为新的hash值。那么如果直接在地址栏中输入URL从而改变路由呢，例如

我将dashboadr删除，然后置为article/hotSpot，然后回车，vue又是如何处理的呢？

setupListeners () {
 window.addEventListener('hashchange', () => {
 if (!ensureSlash()) {
 return
 }
 this.transitionTo(getHash(), route => {
 replaceHash(route.fullPath)
 })
 })
}

该方法设置监听了浏览器事件hashchange，调用的函数为replaceHash，即在浏览器地址栏中直接输入路由相当于代码调用了replace()方法.后面的步骤自然与HashHistory.replace()相同，一样实现页面渲染。