2021-10-11 Vue-router路由导航守卫

全局前置守卫

守卫是异步进行的，在所有守卫resolve之前，路由一直处于waiting等待中，当导航触发的时候，全局前置守卫按照顺序执行
前置守卫router.beforeEach()有三个参数：
to：导航要去的地址
from：导航原本的地址
next：执行下一个守卫
next(false)代表中断当前导航，如果URL发生改变，会回到from的URL去；
next(’/’)代表路由跳转到指定url
next(error)如果next被传入一个Error实例，那么导航将被终止并且进入router.error()注册的回调中去

全局解析守卫

全局解析守卫在所有组件守卫和异步路由组件被解析完以后被调用；router.beforeResolve

全局后置守卫

在导航被确认后的回调，router.afterEach()；
应用场景：滚回页面顶部，更新页面title，懒加载结束

路由独享的守卫

每个路由独享的前置守卫beforeEnter

const router = new VueRouter({
    
    
	route: [{
    
    
		path: '/login',
		component: login,
		beforeEnter: (to, from, next){
    
    
			//do somethiing
		}
	}]
})

组件内守卫

export default {
    
    
	beforeRouteEnter(to, from. next){
    
    
		//不能使用`this`，因为调用时还没有构建组件
		//在渲染组件被confirm之前调用
	}，
	beforeRouteUpdate(to, from, next) {
    
    
		//当前路由改变，但是组件被复用的时候调用，比如动态参数路径
		//可以使用this
	},
	beforeRouteLeave(to, from) {
    
    
		//导航离开该组件调用的钩子
	}
}

完整的导航解析流程

1. 路由改变，导航触发
2. 失活组件调用beforeRouteLeave
3. 全局前置beforeEach触发
4. 重用组件触发beforeRouteUpdate
5. 加载路由之前beforeEnter
6. 被激活的路由触发beforeRouteEnter
7. 加载异步路由组件和组件beforeResolve
8. 导航被确认
9. 全局后置钩子afterEach