Vue2.0路由进阶，为什么要学习导航守卫（） Vue2.0路由进阶，为什么要学习

【Vue2.0路由进阶，为什么要学习导航守卫（）】我们在每学一项新知识的时候，首先我们得至少这项知识有什么用，能为我们解决什么问题。对吧？
导航守卫，也称路由守卫
怎么理解这个名词呢？
官方解释：vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
简单来说，就是路由跳转时我们要进行的操作
举个栗子，比如登录跳转
我们在登录跳转之前必须先做登录验证
在我们没有登陆之前，我们当然不能跳转到某个路由对象
以下内容是我结合官方文档总结出来的↓↓↓
路由守卫可以分成以下几类一、全局前置守卫
二、全局解析守卫
三、全局后置钩子
四、路由独享守卫
五、组件内守卫
我们先看一下整个导航解析流程↓↓↓
一个完整的导航解析流程一、导航被触发
二、在失活的组件，也就是即将离开的页面组件里调用离开守卫beforeRouteLeave
三、调用全局的前置守卫beforeEach
四、在重用的组件里调用里调用beforeRouteUpdate
五、调用路由独享的守卫beforeEnter
六、解析异步路由组件
七、在被激活的组件里，也就是即将进入的页面组件里面调用beforeRouteEnter
八、调用全局的解析守卫beforeResolve
九、导航被确认
十、调用全局的后置钩子afterEach
十一、触发DOM更新
十二、创建好的实例调用beforeRouteEnter守卫里传给next的回调函数
全局前置守卫我们可以使用router.beforeEach注册一个全局前置路由
前置路由里面放的是页面跳转之前要处理的逻辑
router.beforeEach( (to, from, next) => { } )
当一个导航触发时，全局前置路由按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。
参数解析：
to：即将要进入的目标
from：当前导航正要离开的路由
next：前面的to的from都是路由对象，而这里的next是一个方法，一定要调用该方法来resolve这个钩子，执行效果依赖next方法的调用参数。

next()进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed
next(false)中断当前的导航。如果浏览器的URL改变了(可能是用户手动点击浏览器后退按钮) ，那个URL地址会重置到from路由对应的地址。
next(‘/’)或者next({ path: ‘/’})跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
next(error)如果传入next的参数是一个Error实例，则导航会被种植且该错误会被传递给router.onError()注册过的回调。

确保要调用next方法，否则钩子就不会被resolved
全局解析守卫我们可以用router.beforeResolve注册一个全局守卫。
router.beforeResolve(to, from, next)也是一个全局守卫，这和router.beforeEach类似，区别是在导航被确认(所有导航钩子都结束)之前，同时在所有组件内守卫和异步路由被解析之后，解析守卫就被调用。
全局后置钩子一般是用于处理路由跳转后的一些操作
router.afterEach( (to, from) => {} )
路由独享守卫路由独享守卫是在路由列表里面配置
如：

{ path: ‘home’, component: Home, beforeEnter: (to, from, next) => { if (from.name == login) { console.log(‘这是从登录页跳转过来的’)} else { console.log(‘这不是从登录页跳转过来的’) } next()//如果添加了beforeEnter()记得一定要调用next()这个钩子，要不然路由不会跳转 } }

组件内守卫组件内守卫，就是在.vue文件里面的守卫
有三个钩子函数
beforeRouteEnter-进入组件之前

beforeRouteEnter(to, from, next){}//页面还没渲染好的时候调用，不能使用this

在进入组件前被调用，组件实例还没有被创建，不能使用this关键字
不过可以通过传一个回调next来访问组件实例，也就是可以通过next回调实例化后的组件，用next函数的vm参数充当this

export default { data(){ return{ infor:'ThinkBig' } }, beforeRouteEnter:(to,from,next)=>{ //此时该组件还没被实例化 alert(this.infor); //弹出消息框信息为 undefined next(vm =>{ //此时该组件被实例化了 alert(vm.infor); //弹出消息框信息为 ThinkBig }) }

beforeRouteLeave-离开组件之后离开组件之后调用，可以调用this关键字
beforeRouteLeave(to, from, next) {}

export default { beforeRouteLeave(to,from,next){ if(confirm("确定离开吗？") == true){ next()//跳转到另一个路由 }else{ next(false); //不跳转 } } }

boforeRouteUpdate-组件复用触发更新该组件被复用时调用，可以调用this关键字

boforeRouteUpdate(to, from, next) { //在当前路由改变，但是该组件被复用时调用 //举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， //由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 //可以访问组件实例 `this` }