vue路由守卫

什么是路由守卫?

当我们点击跳转到某个页面时，有些页面需要我们登录后在能够访问，这时候我们就会用到路由守卫进行路由跳转的验证。

路由守卫分三大类

全局守卫
beforeEach前置守卫
一般我们通过前置守卫进行登录验证：

// 我们可以将需要登录的页面放进白名单中
const routeList = ['login','detail']
router.beforeEach((to,from)=>{
	// 1. 判断即将进入的页面是否需要登录
	if(routeList.includes(to.name)) {
		// 2. 判断是否登录
		let token = localStorage.getItem('token')
		if(!token) {
			next('/login')
		}
	}
	next()
})

beforeResolve前置解析守卫
afterEach后置钩子
守卫不同的是，后置钩子不会接受 next 函数也不会改变导航本身：

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

// 路由后置守卫动态设置title
router.afterEach((to, from) => {
  document.querySelector('title').innerHTML = to.meta.title
})

单个路由独享的守卫
beforeEnter

const router = new VueRouter({
  routes: [
    {
      path: '/info',
      component: info,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件级守卫
与data同级
beforeRouteEnter页面进入(不能获取组件实例this,因为守卫执行前组件实例还没有创建)
不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

beforeRouteUpdate路由更新之前
beforeRouteLeave页面离开之后

应用场景：
(一) 清除当前组件中的定时器
当一个组件中有一个定时器时, 在路由进行切换的时候, 可使用beforeRouteLeave将定时器进行清除, 以免占用内存:
beforeRouteLeave (to, from, next) {  
	 window.clearInterval(this.timer) //清除定时器   
	 next()
}

(二) 禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消
beforeRouteLeave (to, from, next) {
  const answer = window.confirm('你真的要离开吗？你还没有保存你的修改')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

(三) 保存相关内容到Vuex中或Session中
当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中
beforeRouteLeave (to, from, next) {
    localStorage.setItem(name, content); //保存到localStorage中
    next()
}

路由钩子参数

to: 即将要进入的目标路由对象

from: 当前导航正要离开的路由

next: 钩子函数，里面定义参数，确认下一步路由要做什么

next(’/’)或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，next({name: ‘home’}) 。

完整的导航解析流程

第一次进入页面并没有触发组件内部的路由守卫
进入第二个页面时：
beforeRouteLeave > beforeEach > beforeEnter > beforeRouteEnter > beforeResolve > afterEach > destroyed > beforeRouteLeave
进入第三个页面时：
beforedestroy > destroyed > beforeEach > beforeEnter > beforeRouteEnter > beforeResolve > afterEach > beforeRouteLeave
如果组件复用，
beforeEach > beforeRouteUpdate > beforeResolve > afterEach

beforeRouteUpdate在当前路由改变，但是该组件被复用时调用，进入后不会再触发created等事件。