vue-router

模式

三种：hash、history、abstract

标题	实现原理
hash	通过浏览器自带的window.onhashchange()方法，监听匹配url的变化（包括路径、参数等）进行解析，加载不同组件，VNode节点动态渲染 HashHistory有两个方法HashHistory.push()和HashHistory.replace()，push是将路由添加到浏览器访问历史的栈顶，replace是将路由替换当前栈顶的路由
history	浏览器HTML5 history interface的pushState()和replaceState() 这两个方法都是作用于浏览器的历史栈中，可以对历史记录修改 注意：这里如果采取此模式，服务器要进行相关的配置，如果没有会跳转404 这里还可以做一下引申，HTML5的interface还有哪些, 点击穿越
abstract	主要用于没有特定环境中，如nodejs，在前端页面表现主要在内嵌页面，如页面抽屉模型

钩子

三种：全局钩子、路由独享钩子、组件钩子

标题	作用域	代码
全局钩子	全局，主要在路由拦截处	router.beforeEach(to,from,next)
路由独享钩子	单独组件，用于路由配置出	router.beforeEnter(to,from,next)
组件钩子	组件内	beforeRouteEnter(to,from,next)=>进入组件前，尚未实例，没有this，可通过next(vm=>vm.a)调用 beforeRouteUpdate(to,from,next)=>当路由发生变化时（包括参数）调用，更新组建 beforeRouteLeave(to,from)=>离开页面时调用

路由懒加载

三种：es6的import、vue异步加载resolve、webpack的require.ensure

标题	用法
import	{path:'/a',name:'a',component()=>import('path')}
reslove-require	{path:'/a',name:'a',component:reslove=>reuqire(['path'],reslove)}
require.ensure	{path:'/a',name:'a',component:r=>require.ensure([],()=>r(require('path')),'dome')}