vue-router源码分析
上一篇我们写了前端路由，这几天比较闲，抽空研究了vue.js官方路由的vue-router的实现。
本文主要是以vue-router2.7.0（https://github.com/vuejs/vue-router）版本的源代码进行分析。
首先我们来看一下目录结构
这里，先大概说明一下各个文件的作用，下面会详细讲解
components下是两个组件<router-view> and <router-link> 的实现
history是路由方式的封装
util下主要是各种功能类和功能函数
create-matcher和create-router-map的作用是生成匹配表
index是整个插件的入口
Install 提供安装的方法
看源代码之前，我们看一下vue-router的使用方法
import Vue from 'vue' import VueRouter from 'vue-router' //注册插件 Vue.use(VueRouter) // 1. 定义（路由）组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 // 使用 router-link 组件来导航. // 路由出口 // 路由匹配到的组件将渲染在这里 const app = new Vue({ router, template: ` <div id="app"> <h1>Basic</h1> <ul> <li><router-link to="/">/</router-link></li> <li><router-link to="/foo">/foo</router-link></li> <li><router-link to="/bar">/bar</router-link></li> <router-link tag="li" to="/bar">/bar</router-link> </ul> <router-view class="view"></router-view> </div> ` }).$mount('#app')
插件安装
利用 Vue.js 提供的插件机制 .use(plugin) 来安装 VueRouter，而这个插件机制则会调用该 plugin 对象的 install 方法
这里我们先分析注册vueRouter类的两个文件 src/index.js 和src/install.js
Index文件主要暴露了一个vueRouter类
xport default class VueRouter { constructor (options: RouterOptions = {}) { ..... } //初始化函数 init (app: any /* Vue component instance */) { this.apps.push(app) // main app already initialized. if (this.app) { return } //初次初始化,即首次进入页面路由指定展示 this.app = app const history = this.history if (history instanceof HTML5History) { history.transitionTo(history.getCurrentLocation()) } else if (history instanceof HashHistory) { //建立hash监控 const setupHashListener = () => { history.setupListeners() } history.transitionTo( history.getCurrentLocation(), setupHashListener, setupHashListener ) } history.listen(route => { this.apps.forEach((app) => { app._route = route }) }) } } VueRouter.install = install VueRouter.version = '__VERSION__' //在外部直接引用vue-router，自动使用插件 if (inBrowser && window.Vue) { window.Vue.use(VueRouter) }
这里是vue插件的经典写法，给插件对象增加 install 方法用来安装插件具体逻辑，同时在最后判断下如果是在浏览器环境且存在 window.Vue 的话就会自动使用插件。
接下来，我们从install看vue如何安装插件
import View from './components/view' import Link from './components/link' export let _Vue export function install(Vue) { if (install.installed) return install.installed = true //私有化vue，方便引入 _Vue = Vue const isDef = v => v !== undefined const registerInstance = (vm, callVal) => { let i = vm.$options._parentVnode if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) { i(vm, callVal) } } Vue.mixin({ beforeCreate() { //首次进入初始化路由 if (isDef(this.$options.router)) { //根组件指向自己 this._routerRoot = this this._router = this.$options.router //初次进入对页面进行路由 this._router.init(this) //监控 router数据变化，这里为更新router-view Vue.util.defineReactive(this, '_route', this._router.history.current) } else { //为每个组件传递根组件，方便访问router信息 this._routerRoot = (this.$parent && this.$parent._routerRoot) || this } registerInstance(this, this) }, destroyed() { registerInstance(this) } }) /**router访问的是根组件的router对象，就是传入的router**/ Object.defineProperty(Vue.prototype, '$router', { get() { return this._routerRoot._router } }) /**route访问的是根组件的router对象，就是传入的route**/ Object.defineProperty(Vue.prototype, '$route', { get() { return this._routerRoot._route } }) //注册router-view和router-link组件 Vue.component('router-view', View) Vue.component('router-link', Link) const strats = Vue.config.optionMergeStrategies // use the same hook merging strategy for route hooks strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created }
install做了以下操作
1、对所有vue实例混入beforeCreate操作，设置_routerRoot向上传递指向根组件，根组件设置router对象
2、根组件首次进入的时候，初始化路由，将router对象挂载到根组件元素_router上，并且设置劫持数据_route
3、通过给 Vue.prototype 定义 $router、$route 属性把他们注入到所有组件中（主要是为了方便访问router，route）
4、注册两个组件outer-view和router-link
创建 router 实例
在使用的实例中，我们看到安装完插件后，会实例一个router对象，把路由配置的数组作为参数传入，并且将其传入vue实例的options中。接下来我们看VueRouter类的作用。VueRouter在index.js文件中
export default class VueRouter { static install: () => void; static version: string; app: any; apps: Array<any>; ready: boolean; readyCbs: Array<Function>; options: RouterOptions; mode: string; history: HashHistory | HTML5History | AbstractHistory; matcher: Matcher; fallback: boolean; beforeHooks: Array<?NavigationGuard>; resolveHooks: Array<?NavigationGuard>; afterHooks: Array<?AfterNavigationHook>; constructor (options: RouterOptions = {}) { this.app = null this.apps = [] this.options = options this.beforeHooks = [] this.resolveHooks = [] this.afterHooks = [] this.matcher = createMatcher(options.routes || [], this) //生成匹配表 /*路由模式***/ let mode = options.mode || 'hash' /**兼容低版本不支持history模式*/ this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false if (this.fallback) { mode = 'hash' } /**非浏览器***/ if (!inBrowser) { mode = 'abstract' } this.mode = mode /**门面模式封装history***/ switch (mode) { case 'history': this.history = new HTML5History(this, options.base) break case 'hash': this.history = new HashHistory(this, options.base, this.fallback) break case 'abstract': this.history = new AbstractHistory(this, options.base) break default: if (process.env.NODE_ENV !== 'production') { assert(false, `invalid mode: ${mode}`) } } }
这里可以看到构造函数中有一步操作
this.matcher = createMatcher(options.routes || [], this)
将传入的routes配置数组处理为 mather属性的值，顺藤摸瓜，我们去createMatcher创建的文件src/create-matcher.js 文件中看他到底做了什么操作。
export function createMatcher ( routes: Array<RouteConfig>, router: VueRouter ): Matcher { const { pathList, pathMap, nameMap } = createRouteMap(routes) //生成routermap表 function addRoutes (routes) { createRouteMap(routes, pathList, pathMap, nameMap) } function match ( raw: RawLocation, currentRoute?: Route, redirectedFrom?: Location ): Route { const location = normalizeLocation(raw, currentRoute, false, router) const { name } = location if (name) { const record = nameMap[name] if (process.env.NODE_ENV !== 'production') { warn(record, `Route with name '${name}' does not exist`) } if (!record) return _createRoute(null, location) const paramNames = record.regex.keys .filter(key => !key.optional) .map(key => key.name) if (typeof location.params !== 'object') { location.params = {} } if (currentRoute && typeof currentRoute.params === 'object') { for (const key in currentRoute.params) { if (!(key in location.params) && paramNames.indexOf(key) > -1) { location.params[key] = currentRoute.params[key] } } } if (record) { location.path = fillParams(record.path, location.params, `named route "${name}"`) return _createRoute(record, location, redirectedFrom) } } else if (location.path) { location.params = {} for (let i = 0; i < pathList.length; i++) { const path = pathList[i] const record = pathMap[path] if (matchRoute(record.regex, location.path, location.params)) { return _createRoute(record, location, redirectedFrom) } } } // no match return _createRoute(null, location) } function redirect ( record: RouteRecord, location: Location ): Route { //***** } function alias ( record: RouteRecord, location: Location, matchAs: string ): Route { //********* } function _createRoute ( record: ?RouteRecord, location: Location, redirectedFrom?: Location ): Route { //************ } return { match, addRoutes } }
在代码中，我们看到了createMatcher再一次将routes配置数组传给了createRouteMap进一步处理
根据代码分析createMatcher就是根据传入的routes生成路由map对应表，并且返回match函数以及一个可以增加路由配置项addRoutes函数，向上传递给VueRouter类暴露的接口addRoutes。
我们继续来看src/create-route-map.js下的createRouteMap如何生成map表的
export function createRouteMap ( routes: Array<RouteConfig>, oldPathList?: Array<string>, oldPathMap?: Dictionary<RouteRecord>, oldNameMap?: Dictionary<RouteRecord> ): { pathList: Array<string>; pathMap: Dictionary<RouteRecord>; nameMap: Dictionary<RouteRecord>; } { // the path list is used to control path matching priority const pathList: Array<string> = oldPathList || [] //路径列表 const pathMap: Dictionary<RouteRecord> = oldPathMap || Object.create(null) //path路由map const nameMap: Dictionary<RouteRecord> = oldNameMap || Object.create(null) //名字路由map routes.forEach(route => { addRouteRecord(pathList, pathMap, nameMap, route) }) //确保通配符总是在最后 // ensure wildcard routes are always at the end for (let i = 0, l = pathList.length; i < l; i++) { if (pathList[i] === '*') { pathList.push(pathList.splice(i, 1)[0]) l-- i-- } } return { pathList, pathMap, nameMap } } function addRouteRecord ( pathList: Array<string>, pathMap: Dictionary<RouteRecord>, nameMap: Dictionary<RouteRecord>, route: RouteConfig, parent?: RouteRecord, matchAs?: string ) { const { path, name } = route if (process.env.NODE_ENV !== 'production') { assert(path != null, `"path" is required in a route configuration.`) assert( typeof route.component !== 'string', `route config "component" for path: ${String(path || name)} cannot be a ` + `string id. Use an actual component instead.` ) } const pathToRegexpOptions: PathToRegexpOptions = route.pathToRegexpOptions || {} const normalizedPath = normalizePath( path, parent, pathToRegexpOptions.strict ) if (typeof route.caseSensitive === 'boolean') { pathToRegexpOptions.sensitive = route.caseSensitive } //封装route记录 const record: RouteRecord = { path: normalizedPath, //路径 regex: compileRouteRegex(normalizedPath, pathToRegexpOptions), //转化为匹配数组 components: route.components || { default: route.component }, //关联组件 instances: {}, //实例 name, //名字 parent, //父级router matchAs, redirect: route.redirect, //跳转 beforeEnter: route.beforeEnter, //进入前操作 meta: route.meta || {}, //附加参数 props: route.props == null //props属性 ? {} : route.components ? route.props : { default: route.props } } //子路由 if (route.children) { //子路由收集 route.children.forEach(child => { const childMatchAs = matchAs ? cleanPath(`${matchAs}/${child.path}`) : undefined addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs) }) } //别名 if (route.alias !== undefined) { const aliases = Array.isArray(route.alias) ? route.alias : [route.alias] aliases.forEach(alias => { const aliasRoute = { path: alias, children: route.children } addRouteRecord( pathList, pathMap, nameMap, aliasRoute, parent, record.path || '/' // matchAs ) }) } //存储。按路径存储 if (!pathMap[record.path]) { pathList.push(record.path) pathMap[record.path] = record } //按名字存储 if (name) { if (!nameMap[name]) { nameMap[name] = record } else if (process.env.NODE_ENV !== 'production' && !matchAs) { warn( false, `Duplicate named routes definition: ` + `{ name: "${name}", path: "${record.path}" }` ) } } }
这里可以看到遍历routes根据path和名name将每一个路由项处理为一个routerRecord，并且分类保存到pathMap 和 nameMap，方便后续的匹配操作。
接下来，我们继续往下看vueRouter的构造函数。根据不同的模式生成history对象，那history对象到底是什么呢？我们接下去看History类。所有的History类都继承自基类base.js
export class History { router: Router; //router对象 base: string; //基准路径 current: Route; //当前的路由 pending: ?Route; cb: (r: Route) => void; //回调 ready: boolean; readyCbs: Array<Function>; readyErrorCbs: Array<Function>; errorCbs: Array<Function>; // 子类实现 +go: (n: number) => void; +push: (loc: RawLocation) => void; +replace: (loc: RawLocation) => void; +ensureURL: (push?: boolean) => void; +getCurrentLocation: () => string; constructor (router: Router, base: ?string) { this.router = router this.base = normalizeBase(base) //返回基准路径 this.current = START //route 设置当前route this.pending = null this.ready = false this.readyCbs = [] this.readyErrorCbs = [] this.errorCbs = [] } listen (cb: Function) { this.cb = cb } onReady (cb: Function, errorCb: ?Function) { //***** } onError (errorCb: Function) { //***** } //路由转化操作 transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) { const route = this.router.match(location, this.current) //找到匹配路由 this.confirmTransition(route, () => { //确认是否转化 this.updateRoute(route) //更新route onComplete && onComplete(route) this.ensureURL() // fire ready cbs once if (!this.ready) { this.ready = true this.readyCbs.forEach(cb => { cb(route) }) } }, err => { if (onAbort) { onAbort(err) } if (err && !this.ready) { this.ready = true this.readyErrorCbs.forEach(cb => { cb(err) }) } }) } //确认是否转化路由 confirmTransition (route: Route, onComplete: Function, onAbort?: Function) { const current = this.current const abort = err => { if (isError(err)) { if (this.errorCbs.length) { this.errorCbs.forEach(cb => { cb(err) }) } else { warn(false, 'uncaught error during route navigation:') console.error(err) } } onAbort && onAbort(err) } //判断如果前后是同一个路由，不进行操作 if ( isSameRoute(route, current) && route.matched.length === current.matched.length ) { this.ensureURL() return abort() } //下面是各类钩子函数的处理 //********************* }) } //更新路由 updateRoute (route: Route) { const prev = this.current //跳转前路由 this.current = route //装备跳转路由 this.cb && this.cb(route) //回调函数，这一步很重要，这个回调函数在index文件中注册，会更新被劫持的数据 _router this.router.afterHooks.forEach(hook => { hook && hook(route, prev) }) } }
history/base.js实现了基本history的操作，history/hash.js，history/html5.js和history/abstract.js继承了base，只是根据不同的模式封装了一下几个函数的基本操作
+go: (n: number) => void; +push: (loc: RawLocation) => void; +replace: (loc: RawLocation) => void; +ensureURL: (push?: boolean) => void; +getCurrentLocation: () => string;
可以看到有几个重要的操作函数，transitionTo对于路由更新的控制以及更新路由，updateRoute调用了我们在vue-router中注册的函数
history.listen(route => { this.apps.forEach((app) => { app._route = route }) })
这一步很重要，更新_route的值，还记得我们在install中做的操作
Vue.util.defineReactive(this, '_route', this._router.history.current)
劫持了_route对象，所里这里路由更新_route,导致了视图更新。
接下来，我们来看如何调用transitionTo，达到更新目的，transitionTo的调用都是在代码几个子类的实现里面。
//hash.js //设置路由，监控路由改变 export class HashHistory extends History { constructor (router: Router, base: ?string, fallback: boolean) { super(router, base) // check history fallback deeplinking if (fallback && checkFallback(this.base)) { return } ensureSlash() } setupListeners () { window.addEventListener('hashchange', () => { if (!ensureSlash()) { return } this.transitionTo(getHash(), route => { replaceHash(route.fullPath) }) }) } //push方法 push (location: RawLocation, onComplete?: Function, onAbort?: Function) { this.transitionTo(location, route => { pushHash(route.fullPath) onComplete && onComplete(route) }, onAbort) } //replace方法 replace (location: RawLocation, onComplete?: Function, onAbort?: Function) { this.transitionTo(location, route => { replaceHash(route.fullPath) onComplete && onComplete(route) }, onAbort) } } //html5.js实现 export class HTML5History extends History { constructor (router: Router, base: ?string) { super(router, base) const expectScroll = router.options.scrollBehavior //指回滚方式 if (expectScroll) { setupScroll() } //监控popstate事件 window.addEventListener('popstate', e => { const current = this.current this.transitionTo(getLocation(this.base), route => { if (expectScroll) { handleScroll(router, route, current, true) } }) }) } //push push (location: RawLocation, onComplete?: Function, onAbort?: Function) { const { current: fromRoute } = this this.transitionTo(location, route => { pushState(cleanPath(this.base + route.fullPath)) //保存当前的位置信息，用于返回时候复位 handleScroll(this.router, route, fromRoute, false) onComplete && onComplete(route) }, onAbort) } replace (location: RawLocation, onComplete?: Function, onAbort?: Function) { const { current: fromRoute } = this this.transitionTo(location, route => { replaceState(cleanPath(this.base + route.fullPath)) //保存当前的位置信息，用于返回时候复位 handleScroll(this.router, route, fromRoute, false) onComplete && onComplete(route) }, onAbort) } } //abstract.js实现，这里通过栈的数据结构来模拟路由路径 export class AbstractHistory extends History { index: number; stack: Array<Route>; constructor (router: Router, base: ?string) { super(router, base) this.stack = [] this.index = -1 } push (location: RawLocation, onComplete?: Function, onAbort?: Function) { this.transitionTo(location, route => { this.stack = this.stack.slice(0, this.index + 1).concat(route) this.index++ onComplete && onComplete(route) }, onAbort) } replace (location: RawLocation, onComplete?: Function, onAbort?: Function) { this.transitionTo(location, route => { this.stack = this.stack.slice(0, this.index).concat(route) onComplete && onComplete(route) }, onAbort) } }
这里，3种方式都提供了replace和push接口来更新路由同时hash模式监控 hashchange，H5模式监控 popstate
这里H5模式多了一步保存当前的位置信息，用于返回时候复位的操作
除了在子类调用之外，在 vueRouter类中init也有调用
if (history instanceof HTML5History) { history.transitionTo(history.getCurrentLocation()) } else if (history instanceof HashHistory) { //建立hash监控 const setupHashListener = () => { history.setupListeners() } history.transitionTo( history.getCurrentLocation(), setupHashListener, setupHashListener ) } }
因为在这两种模式下才有可能存在进入时候的不是默认页，需要根据当前浏览器地址栏里的 path 或者 hash 来激活对应的路由，此时就是通过调用 transitionTo 来达到目的
接着继续追踪replace和push的调用，这两个方法的触发通过我们定义的router-link组件
render (h: Function) { const router = this.$router //路由对象 const current = this.$route //当前路由 //解析 to的路径对应路由项 const { location, route, href } = router.resolve(this.to, current, this.append) //设置一些默认元素class const classes = {} const globalActiveClass = router.options.linkActiveClass const globalExactActiveClass = router.options.linkExactActiveClass // Support global empty active class const activeClassFallback = globalActiveClass == null ? 'router-link-active' : globalActiveClass const exactActiveClassFallback = globalExactActiveClass == null ? 'router-link-exact-active' : globalExactActiveClass const activeClass = this.activeClass == null ? activeClassFallback : this.activeClass const exactActiveClass = this.exactActiveClass == null ? exactActiveClassFallback : this.exactActiveClass /**根据当前路由设置当前对象**/ const compareTarget = location.path ? createRoute(null, location, null, router) : route // 如果严格模式的话 就判断是否是相同路由（path query params hash） // 否则就走包含逻辑（path包含，query包含 hash为空或者相同） classes[exactActiveClass] = isSameRoute(current, compareTarget) classes[activeClass] = this.exact ? classes[exactActiveClass] : isIncludedRoute(current, compareTarget) //事件处理函数 const handler = e => { if (guardEvent(e)) { if (this.replace) {//路由replace触发改变router-view router.replace(location) } else {//路由push触发改变router-view router.push(location) } } } //事件对象 const on = { click: guardEvent } if (Array.isArray(this.event)) { this.event.forEach(e => { on[e] = handler }) } else { on[this.event] = handler } //添加元素的类 const data: any = { class: classes } if (this.tag === 'a') { data.on = on data.attrs = { href } } else { // find the first <a> child and apply listener and href const a = findAnchor(this.$slots.default) if (a) { // in case the <a> is a static node a.isStatic = false const extend = _Vue.util.extend const aData = a.data = extend({}, a.data) aData.on = on const aAttrs = a.data.attrs = extend({}, a.data.attrs) aAttrs.href = href } else { // doesn't have <a> child, apply listener to self data.on = on } } return h(this.tag, data, this.$slots.default) } } function guardEvent (e) { // 忽略带有功能键的点击 if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return // 已阻止的返回 if (e.defaultPrevented) return // 右击 if (e.button !== undefined && e.button !== 0) return // `target="_blank"` 忽略 if (e.currentTarget && e.currentTarget.getAttribute) { const target = e.currentTarget.getAttribute('target') if (/\b_blank\b/i.test(target)) return } // 阻止默认行为 防止跳转 if (e.preventDefault) { e.preventDefault() } return true } //找到第一个A标签 function findAnchor (children) { if (children) { let child for (let i = 0; i < children.length; i++) { child = children[i] if (child.tag === 'a') { return child } if (child.children && (child = findAnchor(child.children))) { return child } } } }
可以看到router-link绑定了click 方法调用replace和push 达到更新路由目的。
最后，我们来看router-view如何是如何更新的
export default { name: 'router-view', functional: true, // 功能组件 纯粹渲染 props: { name: { type: String, default: 'default' } }, render (_, { props, children, parent, data }) { //标记为routerview data.routerView = true // directly use parent context's createElement() function //直接使用父组件上下文的createElement()函数 // so that components rendered by router-view can resolve named slots const h = parent.$createElement const name = props.name const route = parent.$route const cache = parent._routerViewCache || (parent._routerViewCache = {}) //缓存 // determine current view depth, also check to see if the tree // has been toggled inactive but kept-alive. let depth = 0 let inactive = false //解决router-view 嵌套问题 while (parent && parent._routerRoot !== parent) { if (parent.$vnode && parent.$vnode.data.routerView) { depth++ } //是否是keep-alive if (parent._inactive) { inactive = true } parent = parent.$parent } //当前view-router的嵌套深度 data.routerViewDepth = depth // render previous view if the tree is inactive and kept-alive if (inactive) { return h(cache[name], data, children) } // 得到相匹配的当前组件层级的 路由记录 const matched = route.matched[depth] // render empty node if no matched route if (!matched) { cache[name] = null return h() } //缓存组件 const component = cache[name] = matched.components[name] // attach instance registration hook // this will be called in the instance's injected lifecycle hooks data.registerRouteInstance = (vm, val) => { // val could be undefined for unregistration const current = matched.instances[name] if ( (val && current !== vm) || (!val && current === vm) ) { matched.instances[name] = val } } // also register instance in prepatch hook // in case the same component instance is reused across different routes ;(data.hook || (data.hook = {})).prepatch = (_, vnode) => { matched.instances[name] = vnode.componentInstance } // resolve props data.props = resolveProps(route, matched.props && matched.props[name]) return h(component, data, children) } }
可以看到逻辑还是比较简单的，根据route拿到匹配的组件进行渲染就可以了。里面比较复杂的是对于组件的缓存处理。
这里，整个流程就完全走完了。可能还有些懵，我们下面就在总结一下整个流程。
1、安装插件
完成了router-link和 router-view 两个组件的注册，router-link用于触发路由的变化，router-view作为功能组件，用于触发对应路由视图的变化
混入beforeCreate生命周期处理，初始化_routerRoot，_router，_route等数据
全局设置VUE静态访问$router和$route，方便后期访问
2、根据路由配置生成router实例
根据配置数组生成路由配置记录表
生成监控路由变化的hsitory对象
3、将router实例传入根VUE实例
根据beforeCreate混入，为根vue对象设置了劫持字段_route，用户触发router-view的变化
调用init()函数，完成首次路由的渲染，首次渲染的调用路径是 调用history.transitionTo方法，根据router的match函数，生成一个新的route对象，接着通过confirmTransition对比一下新生成的route和当前的route对象是否改变，改变 的话触发updateRoute，更新hsitory.current属性，触发根组件的_route的变化,从而导致组件的调用render函数，更新router-view。
另外一种更新路由的方式是主动触发，router-link绑定了click方法，触发history.push或者history.replace,从而触发history.transitionTo
同时会监控hashchange和popstate来对路由变化作对用的处理
