vue路由守卫

导航守卫：正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

简单的说，导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。

在实际项目中，路由跳转前做一些验证，比如登录验证，是网站中的普遍需求

vue的路由守卫分为三种：全局路由守卫、组件内路由守卫和路由独享守卫。

每个守卫方法接收三个参数：

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

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

3. next : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数（是否接着往下执行，若不写next（），则页面不会往下执行，必写）。

一、全局路由守卫

全局路由守卫分为两种：全局前置守卫和全局后置钩子

它们都在main.js中定义

1. 全局前置守卫

    //语法：
    router.beforeEach((to, from, next) => {
        //...
    	next()
    })
    //使用：
       router.beforeEach((to, from, next) => {
                 //我在这里模仿了一个获取用户信息的方法
       let isLogin = window.sessionStorage.getItem('userInfo');
         if (isLogin) {
          //如果用户信息存在则往下执行。
           next()
       } else {
         //如果用户token不存在则跳转到login页面
         if (to.path === '/login') {
            next()
          } else {
           next('/login')
        }
    } 
    	next()
    })

2. 全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身

      router.afterEach( (to,from )=> {
       console.log(to);
       console.log(from);
      //...
     }) 

afterEach用的少，beforeEach用的多

二、路由独享守卫

在router文件夹里的index.js里相对应的路由中写入

  beforeEnter: (to, from, next) => {
        // ...
        next()
      }

三、组件内路由守卫

顾名思义，在你要设置的组件内部使用，和data同级

组件内路由守卫有三种方法：

1. beforeRouteEnter：

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

2. beforeRouteUpdate :

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

4. beforeRouteLeave :

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

四、完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next
    的回调函数，创建好的组件实例会作为回调函数的参数传入。