一、导航守卫
残缺的导航解析流程：
- 导航被触发
- 在失活的组件里调用beforeRouteLeave
- 调用全局的beforeEach
- 在重用的组件里调用beforeRouteUpdate
- 在路由配置里调用beforeEnter
- 解析异步路由组件
- 在被激活的组件里调用beforeRouteEnter
- 调用全局的beforeResolve
- 导航被确认
- 调用全局的afterEach
- 触发DOM更新
- 调用beforeRouteEnter守卫中传给next的回调函数，创立好的组件实例会作为回调函数的参数传入。
参数或查问的扭转并不会触发进入/来到的导航守卫。能够通过观察$route对象来应答这些变动，或应用beforeRouteUpdate的组件内守卫。
1、全局前置守卫
router.beforeEach
const router = new VueRouter({...})router.beforeEach(to,from,next) => { /*to:Route--行将要进入的指标路由对象*/ /*from:Route--以后导航正要来到的路由*/ /*next:function--必须要调用该办法来resolve这个钩子。执行成果依赖next办法的调用参数。*/ next() /*进行管道中的下一个钩子，若全副执行完了，则导航的状态就是confirmed。*/ next(false) /*中断以后的导航。如果浏览器的url扭转了（可能是用户手动或浏览器后退），那么url会重置到from路由对应的地址。*/ next('/') /*同下*/ next({path:'/'}) /*跳转到一个不同的地址。*/ next(error) /*导航被终止，且谬误会传递给router.onError()注册过的回调。*/}确保next函数在任何给定的导航守卫中都被严格调用一次。可呈现多于一次，但只能在所有的逻辑门路都不重叠的状况下，否则钩子永远都不会被解析或报错。
/* BAD */router.beforeEach((to, from, next) => { if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) /*如果用户未能验证身份，则 `next` 会被调用两次*/ next()})/* GOOD */router.beforeEach((to, from, next) => { if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) else next()})2、全局解析守卫
router.beforeResolve--与router.beforeEachj相似，区别为：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
3、全局后置钩子
router.afterEach()--无next(),也不会扭转导航自身
router.afterEach(to,from)=>{ //...}路由配置形式：
1、路由独享的守卫--间接在路由配置上定义beforeEnter守卫
const router = new VueRouter({ routes: [ { path: '/user', component: User, beforeEnter: (to,from,next)=>{} } ]})2、组件内的守卫
能够在路由组件内间接定义以下路由导航守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
const Foo = { template: `...`, beforeRouteEnter(to, from, next) { /* 在渲染该组件的对应路由被 confirm 前调用*/ /*不能！获取组件实例 `this`*/ /*因为当守卫执行前，组件实例还没被创立,能够通过传一个回调给next来拜访组件实例，仅该守卫反对此办法*/ next(vm => { /*通过vm拜访组件实例*/ }) }, beforeRouteUpdate(to, from, next) { /* 在以后路由扭转，然而该组件被复用时调用*/ /* 举例来说，对于一个带有动静参数的门路 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候*/ /* 因为会渲染同样的 Foo 组件，因而组件实例会被复用。而这个钩子就会在这个状况下被调用。*/ /* 能够拜访组件实例 `this`*/ this.name = to.params.name next() }, beforeRouteLeave(to, from, next) { /* 导航来到该组件的对应路由时调用*/ /* 能够拜访组件实例 `this`*/ /*该守卫能够用来禁止用户在还未保留批改前忽然来到，导航能够通过next(false)勾销*/ const answer = window.confirm('还没有保留，确定要来到吗') if(answer){ next() }else{ next(false) } }}二、路由元信息-meta
路由登录拦挡
/*1、在须要做登录验证的路由中设置meta*/requireAuth值为trueconst router = new VueRouter({ routes = [ { path: '/detail', name: 'detail', component: Detail, meta: { requireAuth: true } }, { path: '/login', name: 'login', component: Login } ]})/*2、router.beforeEach()钩子函数，会在进入每个网页之前被调用，可在该钩子函数内做路由拦挡*/router.beforeEach((to,from,next) => { /*判断将进入的路由是否须要路由拦挡*/ if(to.matched.some(record => record.meta.requireAuth){ /*vuex.state判断token是否存在*/ if(store.state.token){ /*已登录*/ next() }else{ next({ path: '/login', query: {redirect: to.fullPath} }) } } else { next() }})三、过渡动效
应用<transition>标签将<router-view>标签包裹能够增加一些过渡成果，会给在这个router-view中的路由都加上同一种成果。
若想给不同的路由加不同的成果，能够在路由组件中设置<transition>增加成果
const Foo = { template: ` <transition name="slide"> <div class="foo">...</div> </transition> `}const Bar = { template: ` <transition name="fade"> <div class="bar">...</div> </transition> `}设置动静过渡
<!-- 应用动静的 transition name --><transition :name="transitionName"> <router-view></router-view></transition>//...// 接着在父组件内// watch $route 决定应用哪种过渡watch: { '$route' (to, from) { const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' }}四、数据获取
在进入某个路由后，须要从服务器获取数据，有两种形式：
1、导航实现之后获取：
在路由组件的created钩子函数中调用获取数据的办法
export default{ data (){ return { loading: false } }, created(){ //组件创立实现后获取数据，此时data曾经被observed了 this.fetchData() }, methods: { fetchData() { this.loading = true //发动数据申请，此时能够通过$route.params获取url上的数据 getPost(this.$route.params.id,(res)=>{ //... }) } }}2、在导航前获取数据
在要跳转的路由组件中的beforeRouteEnter守卫中获取数据，当数据获取胜利后只调用next()办法。
export default { data () { return { post: null, error: null } }, beforeRouteEnter (to, from, next) { getPost(to.params.id, (err, post) => { next(vm => vm.setData(err, post)) }) }, // 路由扭转前，组件就曾经渲染完了 // 逻辑稍稍不同 beforeRouteUpdate (to, from, next) { this.post = null getPost(to.params.id, (err, post) => { this.setData(err, post) next() }) }, methods: { setData (err, post) { if (err) { this.error = err.toString() } else { this.post = post } } }}五、滚动行为
当切换到新路由时，页面滚动到顶部或放弃原先的滚动地位，能够在router实例中提供一个scrollBehavior办法。
const router = new VueRouter({ routes: [...], scrollBehavior(to,from,savedPosition){ //return 冀望滚动到的地位 //return {x: number, y: number} //滚动到顶部 //return {x:0,y:0} //savedPosition在按下后退和后退按钮时可用 if(savedPosition) { return savedPosition } else { return {x:0,y:0} } }})模仿滚动到锚点
scrollBehavior(to,from,savedPosition){ if(to.hash) { return { selector: to.hash, //设置平滑滚动 behavior: 'smooth' } }}六、路由懒加载
为进步加载效率，应用懒加载，让路由被拜访时才加载对应组件。需联合Vue异步组件和webpack
//1、将异步组件定义为返回一个promise的工厂函数。const Foo = ()=>{ Promise.resolve({ //组件定义对象 })}//2、应用import引入组件import('./Foo.vue') //import返回一个promise//可联合两者const Foo = ()=> import('./Foo.vue')//路由在实例化时跟一般的一样