router实现原理及两种模式(2)

init (app: any /* Vue component instance */) { // .... const history = this.history if (history instanceof HTML5History) { history.transitionTo(history.getCurrentLocation()) } else if (history instanceof HashHistory) { const setupHashListener = () => { history.setupListeners() } history.transitionTo( history.getCurrentLocation(), setupHashListener, setupHashListener ) } history.listen(route => { this.apps.forEach((app) => { app._route = route }) }) } // .... // VueRouter类暴露的以下方法实际是调用具体history对象的方法 push (location: RawLocation, onComplete?: Function, onAbort?: Function) { this.history.push(location, onComplete, onAbort) } replace (location: RawLocation, onComplete?: Function, onAbort?: Function) { this.history.replace(location, onComplete, onAbort) } }

如果是HTML5History，则执行

history.transitionTo(history.getCurrentLocation())

如果是Hash模式，则执行

const setupHashListener = () => { history.setupListeners() } history.transitionTo( history.getCurrentLocation(), setupHashListener, setupHashListener )

可以看出，两种模式都执行了transitionTo( )函数。 接下来看一下两种模式分别是怎么执行的，首先看一下Hash模式

HashHistory.push()

我们来看HashHistory中的push()方法：

push (location: RawLocation, onComplete?: Function, onAbort?: Function) { this.transitionTo(location, route => { pushHash(route.fullPath) onComplete && onComplete(route) }, onAbort) } function pushHash (path) { window.location.hash = path }

transitionTo()方法是父类中定义的是用来处理路由变化中的基础逻辑的，push()方法最主要的是对window的hash进行了直接赋值：

window.location.hash = route.fullPath hash的改变会自动添加到浏览器的访问历史记录中。

那么视图的更新是怎么实现的呢，我们来看父类History中transitionTo()方法的这么一段：

transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) { // 调用 match 得到匹配的 route 对象 const route = this.router.match(location, this.current) this.confirmTransition(route, () => { this.updateRoute(route) ... }) } updateRoute (route: Route) { this.cb && this.cb(route) } listen (cb: Function) { this.cb = cb }

可以看到，当路由变化时，调用了History中的this.cb方法，而this.cb方法是通过History.listen(cb)进行设置的。回到VueRouter类定义中，找到了在init()方法中对其进行了设置：

init (app: any /* Vue component instance */) { this.apps.push(app) history.listen(route => { this.apps.forEach((app) => { app._route = route }) }) }

代码中的app指的是Vue的实例，._route本不是本身的组件中定义的内置属性，而是在Vue.use(Router)加载vue-router插件的时候，通过Vue.mixin()方法，全局注册一个混合，影响注册之后所有创建的每个 Vue 实例，该混合在beforeCreate钩子中通过Vue.util.defineReactive()定义了响应式的_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方法将路由进行替换。这样不会将新路由添加到浏览器访问历史的栈顶，而是替换掉当前的路由。

监听地址栏