VueRouter源码分析

感谢

funfish, 玩弄心里的鬼, Vue.js 技术揭秘的文章，对我的帮助

前言

vue-router的源码不算很多, 但是内容也不算少。本文谈不上逐行分析, 但是会尽量详尽的说明主流程和原理。对一些工具函数和边缘条件的处理会略过，因为我也没有逐行去了解它们，请见谅。

前置基础知识

我们在学习VueRouter源码前，先来复习下hash以及histroy相关的知识。更多细节请参考mdn文档，本节内容节选自mdn文档。

hash

onhashchange

当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号)。注意 histroy.pushState() 绝对不会触发 hashchange 事件，即使新的URL与旧的URL仅哈希不同也是如此。

histroy

pushState

pushState()需要三个参数: 一个状态对象, 一个标题(目前被忽略), 和一个URL。

state, 状态对象state是一个JavaScript对象，popstate事件触发时，该对象会传入回调函数
title, 目前所有浏览器忽略
url, 新的url记录

replaceState

history.replaceState()的使用与history.pushState()非常相似，区别在于replaceState()是修改了当前的历史记录项而不是新建一个。

onpopstate

调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)。

如果当前处于激活状态的历史记录条目是由history.pushState()方法创建, 或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。

应用初始化

通常构建一个Vue应用的时候, 我们会使用Vue.use以插件的形式安装VueRouter。同时会在Vue的实例上挂载router的实例。

import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falselet a = new Vue({router,render: h => h(App)
}).$mount('#app')


import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'Vue.use(Router)export default new Router({mode: 'history',base: process.env.BASE_URL,routes: [{path: '/',name: 'home',component: Home},{path: '/about',name: 'about',component: () => import(/* webpackChunkName: "about" */ './views/About.vue')}]
})

插件的安装

在Vue的文档中指出Vue.js 的插件应该有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象, 我们首先查看源码中install.js的文件。

在install文件中, 我们在Vue的实例上初始化了一些私有属性

_routerRoot, 指向了Vue的实例
_router, 指向了VueRouter的实例

在Vue的prototype上初始化了一些getter

$router, 当前Router的实例
$route, 当前Router的信息

并且在全局混入了mixin, 已经全局注册了RouterView, RouterLink组件.


import View from './components/view'
import Link from './components/link'export let _Vueexport function install (Vue) {if (install.installed && _Vue === Vue) returninstall.installed = true_Vue = Vueconst isDef = v => v !== undefinedconst registerInstance = (vm, callVal) => {let i = vm.$options._parentVnodeif (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {i(vm, callVal)}}Vue.mixin({beforeCreate () {// 判断是否实例是否挂载了routerif (isDef(this.$options.router)) {this._routerRoot = thisthis._router = this.$options.routerthis._router.init(this)// _router, 劫持的是当前的路由Vue.util.defineReactive(this, '_route', this._router.history.current)} else {this._routerRoot = (this.$parent && this.$parent._routerRoot) || this}registerInstance(this, this)},destroyed () {registerInstance(this)}})Object.defineProperty(Vue.prototype, '$router', {get () { return this._routerRoot._router }})Object.defineProperty(Vue.prototype, '$route', {get () { return this._routerRoot._route }})Vue.component('RouterView', View)Vue.component('RouterLink', Link)const strats = Vue.config.optionMergeStrategiesstrats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
}

Vue.util.defineReactive, 这是Vue里面观察者劫持数据的方法，劫持_route，当_route触发setter方法的时候，则会通知到依赖的组件。而RouterView, 需要访问parent.$route所以形成了依赖(我们在后面会看到)