vue路由全局守卫

vue路由守卫分为三种

1.全局前置守卫(beforeEach)

2.全局解析守卫(beforeResolve)

3.全局后置守卫(afterEach)

一、全局路由前置守卫(beforeEach)     这个用的最多

作用：在路由跳转之前做权限校验

场景：登录注册

需求：我需要在登录之前判断是否存在token，如果存在就放行，不存在就不放行

参数：

1. to：即将要进入的目标路由的对象

2. from 当前路由正要离开的路由

3.next 确认放行

代码：

// 前置路由写在main.js中
router.beforeEach((to, from, next) => {
	const token = localStorage.token;  // 获取token
	if(token) {     // 如果token不为null 就放行，如果为空 就不放行 
		next();
	} else {
	if(to.path === '/') {  // 在为空的情况下，我们路由跳转的是'/' 就放行。'/'代表我们登录页
			next()
		} else {           // 在为空的情况下，访问的不是'/'， 就直接跳转到'/'
			next({
				path: '/'
			})
		}
	}
})

二、全局后置守卫(afterEach)

作用：路由跳转之后触发

场景：可以让路由跳转之后让对应的页面的网页标题改变

需求：我需要跳转之后让网页标题进行一个改变

// 前置路由写在main.js中
router.afterEach((to,from)=>{
	document.title = to.meta.title||'默认标题'
})

三、全局解析守卫(beforeEnter)

作用: 全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发(这个一般用的很少)

router.beforeResolve((to, from, next) => {
  // ...
})