北京网站建设怎么样天,计算机学院网站建设,广西梧州,酒店手机网站模板一、vue-router路由变化侦测
1.1 上一遍文章中#xff0c;介绍了vue-router 的install 函数的内部实现#xff0c;知道了能在this中访问$router 和视图更新的机制#xff0c;文章链接终于把 vue-router 运行原理讲明白了#xff08;一#xff09;#xff01;#xff01…一、vue-router路由变化侦测
1.1 上一遍文章中介绍了vue-router 的install 函数的内部实现知道了能在this中访问$router 和视图更新的机制文章链接终于把 vue-router 运行原理讲明白了一 下面开始介绍上一遍文章遗留的疑惑点_route 属性值如何变化进行剖析 Vue.util.defineReactive(this, _route, this._router.history.current)1.2 我们找到 vue-router 源码的 src目录下的 router.js 文件 里面有一个init方法还记得我们上一遍文章中install 方法中在根组件调用了这个init 方法代码如下经过删减要完整代码请阅读源码 代码中两个重要地方history.transitionTo和history.listen
init (app: any /* Vue component instance */) {const history this.historyif (history instanceof HTML5History || history instanceof HashHistory) {const handleInitialScroll routeOrError {const from history.currentconst expectScroll this.options.scrollBehaviorconst supportsScroll supportsPushState expectScrollif (supportsScroll fullPath in routeOrError) {handleScroll(this, routeOrError, from, false)}}const setupListeners routeOrError {history.setupListeners()handleInitialScroll(routeOrError)}history.transitionTo(history.getCurrentLocation(),setupListeners,setupListeners)}history.listen(route {this.apps.forEach(app {app._route route})})}1.3 history有三种值分别为HTML5History对应的是 路由的history模式 还有hash 和abstract case history:this.history new HTML5History(this, options.base)breakcase hash:this.history new HashHistory(this, options.base, this.fallback)breakcase abstract:this.history new AbstractHistory(this, options.base)breakdefault:if (process.env.NODE_ENV ! production) {assert(false, invalid mode: ${mode})}在1.2 中init 方法执行了history 的 transitionTo 方法传入了三个参数为当前路由路径和setupListeners
history.transitionTo(history.getCurrentLocation(),setupListeners,setupListeners)1.4 下面我们找到transitionTo其具体位置在 src 下面的history目录的base.js 文件重点是 执行了confirmTransition 方法第二个参数是一个回调方法等异步组件准备完毕就执行其中有一个重要步骤就是执行 this.updateRoute(route)
transitionTo (location: RawLocation,onComplete?: Function,onAbort?: Function) {this.confirmTransition(route,() {this.updateRoute(route)onComplete onComplete(route)this.ensureURL()this.router.afterHooks.forEach(hook {hook hook(route, prev)})},err {})}updateRoute 代码如下他会判断cb存不存在存在才执行该函数那么这个cb到底是啥
updateRoute (route: Route) {this.current routethis.cb this.cb(route)}1.5 在base.js 文件中找到一个方法如下看起来好像在哪里见过没错啦就是在执行init方法时候
// base.jslisten (cb: Function) {this.cb cb}
该方法就在 router.js 的init 方法中后于 history.transitionTo 执行因此根组件是不会执行 app._route route 这个方法 // router.js 的 init方法中执行 history.listenhistory.listen(route {this.apps.forEach(app {app._route route})})那执行这个方法有啥用呢我们在1.1 中见过一旦该值发生变化便会通知vue更新视图。那么什么时候才会执行这个方法呢
二、_route 变化时机
2,1 在 history.transitionTo 中 还有一个重要的方法 setupListeners
history.transitionTo(history.getCurrentLocation(),setupListeners,setupListeners)setupListeners 代码如下 const setupListeners routeOrError {history.setupListeners()handleInitialScroll(routeOrError)}history.setupListeners() 具体位置为 html5.js 的 setupListeners 重要代码如下我们监听popstate 事件history模式下触发hash模式触发haschange window.addEventListener(popstate, handleRoutingEvent)具体解释如下 当活动历史记录条目更改时将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState的调用创建的或者受到对history.replaceState的调用的影响popstate事件的state属性包含历史条目的状态对象的副本。
也就是触发 pushState或者 history.replaceState就会触发 popstate 事件然后执行 handleRoutingEvent 函数他会执行 this.transitionTo 函数也就是执行 updateRoute 函数 就是说 我们一旦执行history.pushState或者 history.replaceState 就会更新_route 的值
三、pushState或者 replaceState执行机制
3.1 我们在route的push方法中发现如下代码是不是很眼熟就是我们平时调用的 this.$router.push 代码的执行逻辑这个方法中 执行了history.push push (location: RawLocation, onComplete?: Function, onAbort?: Function) {console.log(执行push逻辑,...arguments)// $flow-disable-lineif (!onComplete !onAbort typeof Promise ! undefined) {return new Promise((resolve, reject) {this.history.push(location, resolve, reject)})} else {this.history.push(location, onComplete, onAbort)}}3.2 我们在html5.js 中找到history的push方法其中就执行 pushState
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {const { current: fromRoute } thisthis.transitionTo(location, route {pushState(cleanPath(this.base route.fullPath))handleScroll(this.router, route, fromRoute, false)onComplete onComplete(route)}, onAbort)}也就是说当我们调用this.$router.push 或者replace 时候就会触发 popstate 事件的监听从而触发_route 更新最后通知vue更新视图一切新的视图就会展现在我们面前啦
