Vue的路由守卫

全局守卫

写在router的js文件下边（不是单独的某个路由里边）

1、全局前置钩子router.beforeEach(fn)，导航被触发----一般登录验证

2、全局解析钩子router.beforeResolve(fn)，组件初始化

3、全局后置钩子router.afterEach(fn)，没有next，导航被确认,一般路由跳转以后用window把窗口调上去

  fn为回调函数，该回调函数一般都有三个形参to，from，next 。

to表示跳转的路由，from表示当前页面的路由，next是执行跳转到哪个路由

router.beforeEach(fn)一般用于过滤路由，如判断是否登录

//全局前置守卫
router.beforeEach((to, from, next) => {
	//用户未登录只能访问首页、登录注册页面
	if (to.path == "/" || to.path == "/login" || to.path == "/register") {
		next();
	} else {
		//去其他页面判断是否登录
		let flag = window.localStorage.getItem("email");
		//登录过直接放行
		if (flag) {
			next()
		} else {
			//未登录则跳转到首页
			Message({
				message: '您尚未登录哦，请先登录！',
				type: 'warning',
				duration: 1500
			});
			next("/");
		}
	}
})
 

router.afterEach(fn)

应用场景：如用于解决跳转路由时，跳转路由的界面并不是在该面顶部的一个小bug

router.afterEach((to, from) => {
  window.scrollTo(0,0)
})

独享守卫

单独写在某个注册路由里边

路由独享的守卫beforeEnter(to,from,next)，路由初始化(组件未初始化)----

a，路由鉴权-----用户体验：界面，功能，bug，效率，权限

b，组件异步加载情景中(插件配置：syntax-dynamic-import)

routes:[{
    path:"/test",
    component:()=>import("../components/Test.vue"),
    beforeEnter(to,from,next){
        if(to.path==="/test"){
          alert("请登录");
          next(false); // 禁止跳转
        }else{
          next()
        }
 	}
}]

组件内部生命周期守卫

beforeRouteLeave 从该组件离开

beforeRouteEnter(to,from,next)，组件被激活，使用不了this，故构造指定该next 可以接收一个回调函数接收当前vm 实例----路由传参获取参数，得到初始化数据

beforeRouteUpdate(to,from,next)，组件重用时被调用----路由传参获取参数，避免增添watch 开销

总结

导航守卫执行顺序：beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < beforeRouteEnter < beforeResolve < afterEach