Vue插件
静态属性
VueRouter.install: (Vue: Function) => void用属性VueRouter.install.installed: boolean标识是否已经install，避免重复操作，另对比app，支持多个根节点共享路由实例
Vue.mixin在实例生命周期中做操作beforeCreatehook中，将配置了routerVueRouter实例的组件视为路由根节点，init函数_routerRoot属性，为 此组件$router 为 VueRouter实例$route 为 当前匹配路由
在VueRouter实例中，监听
history变化，更新_routerRoot._route即做到每次获取$route都是当前路由
<router-link>、<router-view>Vue配置处理项：Vue.config.optionMergeStrategies 等于
created
beforeRouteEnterbeforeRouteLeavebeforeRouteUpdate根据配置的不同
mode，用不同的history做历史管理 根据配置的routes，做正则、别名、重定向等匹配、跳转操作
app: VueComponent 路由根节点
history变化的时候，更新app._routeapps: VueComponent[] 支持多个路由根节点
options: RouterOptionsmode: 'hash'|'history'|'abstract'history: HashHistory | HTML5History | AbstractHistory 继承基类
History
beforeRouteLeave Vue.extend(component).options['hookName']拿到Vue处理过的组件函数bind绑定instance上下文router.beforeHooksbeforeRouteUpdateRouteConfig.beforeEnter兼容以下两种形式，即把
resolve和reject传给函数，再传给return值的thenwebpack dynamic imports (opens new window)
resolve => resolve(Component) resolve => require(['./Foo.vue'], resolve)() => Promise<Component> () => import('./Foo.vue')replace / push 处理history，并用匹配的组件在对应的位置更新页面beforeRouteEnterrouter.resolveHookspopstate事件缓存上一个页面以时间戳为key的滚动数据，并取出当前页面的数据做滚动处理
sessionStorage的缓存+缓存最大历史数HashHistory
mode==='hash'
window.historywindow.addEventListener('popstate'|'hashchange')window.history.replaceState / window.location.replace('xxx')window.history.pushState / window.location.hash='xxx'HTML5History
mode==='history'
window.historywindow.addEventListener('popstate')window.history.replaceStatewindow.history.pushStateAbstractHistory
mode==='abstract'
stack历史栈，index做当前指针matcher: Matcher 匹配器，路径匹配做‘跳转’（组件替换）、高亮
path都处理为绝对路径path-to-regexp做正则匹配规则alias重复处理，即用alias解析后作为path再做一次存储用于快速路径匹配，获取
RouteRecord
pathList 所有
path以此数组做匹配的先后顺序（*值排在最后） 匹配中没有指明name，有path的，循环pathList，取pathMap中的RouteRecord做正则匹配，获取Route
pathMap 以
path为key存储RouteRecord
nameMap 以
name为key存储RouteRecord匹配中指明name的，直接由nameMap获取Route
RouteRecordbeforeHooksresolveHooksafterHooksactiveClass > linkActiveClass > router-link-activeexactActiveClass > linkExactActiveClass > router-link-exact-active默认
click考虑Weex环境没有event.preventDefault
target="_blank"scopedSlot支持
提供数据，组件整个按默认插槽渲染返回
tag非a支持
<a>，则将组件上的事件和属性都加到这个<a>上<a>，事件加到本组件上匹配路由的占位组件 函数式组件（无需管理状态、不用生命周期、只接收些prop） 配置
functional为true
{
functional: true,
// Props 是可选的
props: {
// ...
},
// 为了弥补缺少的实例
// 提供第二个参数作为上下文
render: function (createElement, context) {
// ...
}
}
context.parent.$createElement做元素的创建，而不用createElement 用父节点的上下文渲染组件 可以实现在
<router-view>内定义<slot name="slotName">
keep-active的缓存组件存在父节点对象上
parent._routerViewCache<router-view>中的匹配同步$route.matched对象
matched的父子关系
routerView: booleanrouterViewDepth: number 路由组件的判断依据：放置
$route.matched的第depth项的配置name组件
$parent，累计routerView为true的组件数$route.matched的下标$route.matched[depth].instances存放组件实例
router-view创建的时候
Vue.mixinbeforeCreatehook中赋值，destroyedhook中置空component实例重复用于不同的router-view中时<router-view>传递的属性值和插槽
propsattrsexpress-urlrewrite (opens new window)resolve.alias['vue-router'] 为本工程相对路径
beforeEnter可以直接放到配置的routes的某一层组件上String 类型，会获取本实例的此属性/**
* 多个根节点共享路由组件
*/
const router = new VueRouter({})
const routerVue = Vue.extend({router})
new routerVue({
el: '.app1'
})
new routerVue({
el: '.app2'
})
/**
* 路由实例的嵌套
*/
const routerOut = new VueRouter({
mode: 'history',
routes: [
{
path: '/nested-router',
component: {
router: new VueRouter({
mode: 'abstract',
routes: []
}),
template: '<div><router-view/></div>'
}
}
]
})
flow-binbabel-preset-flow-vueeslint-plugin-flowtypetypes目录/^(v\d+\.\d+\.\d+(-(alpha|beta|rc.\d+))?$)|((revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|ci|chore|types|build)(\(.+\))?: .{1,50})/← vue-lazyload vue@3.x →