vue 路由导航白话全解析

这里先放上官网的教程和说明：点击这里，vue导航守卫官方文档

路由守卫

路由守卫说白了就是路由拦截，在地址栏跳转之前 之后 跳转的瞬间 干什么事

全局守卫

全局守卫顾名思义，就是全局的，整个项目所有路由，跳转所用到的守卫（拦截），设置了全局守卫之后，只要路由（浏览器地址栏）发生变化就会触发的事件

全局守卫分为二部分 前置守卫（跳转之前） 后置钩子（跳转之后）

前置守卫：

router.beforeEach

这个方法有三个参数

（to, from, next）

to：即将进入的地址，比如说 点击按钮 从 A 跳转到 B ，那么to就是 B 的路由对象，

from：要离开的地址，比如说 点击按钮 从 A 跳转到 B ，那么to就是 A 的路由对象，

next：就是在跳转的时候要执行的事件，比如说 点击按钮 从 A 跳转到 B ，然后我在next执行了一个方法 next({ path: ‘/C’ }) 这样就会跳转到C 页面，而不是 B 页面了，这就是路由拦截了，如果这么写的话 不管你愿来是想从 那个页面 跳转 那个页面 他都会给你跳转到 C 页面

在这里就可以判断，如果满足一定的条件 就让他 next({ path: ‘/C’ }) 就是满足一定的条件 才让他跳转到C 不满足的时候 就正常跳转

这里next 还有一个作用 next(false) 这样会中断路由的跳转 比如说 点击按钮 从 A 跳转到 B 然后我执行了 next(false) 那么浏览器就不会进行跳转 从新回到A页面 这样就阻止了路由的跳转 在这里就可以判断，如果满足一定的条件 就让他 next(false) 这样就不进行跳转了

路由独享守卫

顾名思义：就是这个守卫，只是单独的这个组件独享的，局部的，不是全局的，只有这个路由在进行跳转的时候，才会触发的，其他的组件，路由进行跳转的时候不执行这个方法

独享守卫有三个方法：

beforeRouteEnter 在渲染该组件的对应路由被 confirm 前调用 就是页面跳转前要执行的方法 要干的事

beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用 就是当页面 在A 跳转到 B 的一瞬间 要干的事

beforeRouteLeave 导航离开该组件的对应路由时调用 就是在跳转完成之后 要干的事

这三个方法 都有三个参数 （to, from, next） 跟全局守卫的 三个参数用法一样

其中 beforeRouteEnter 守卫 不能 访问 this 其他两个守卫可以访问到this