接上一篇，我们一起学习了vue路由的基本使用以及动态路由、路由嵌套以及路由命名等知识，今天我们一起来学习记录vue-router的钩子函数实现路由守卫；
何为路由守卫？路由守卫有点类似于ajax的请求拦截器，就是请求发送之前先给你拦截住做一些事情之后再去发送请求，同样这里的路由守卫意思差不多；简单理解为就是你在进路由之前，首先把你拦住，对你进行检查；这是不是有点中学门口的保安？进来之前拦住，有学生证就进，没有学生证就不让进；当然，路由守卫不仅仅只是在你进入之前拦住你，还有其他的钩子函数进行其他操作；
vue-router一共给我们提供了三大类钩子函数来实现路由守卫：
1、全局钩子函数（beforeEach、afterEach)
2、路由独享的钩子函数（beforeEnter）
3、组件内钩子函数（beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave）
首先我们先来看一下全局钩子函数：
全局钩子函数：
beforeEach：
beforeEach一共接收三个参数，分别是to、from、next；to：即将进入的路由对象；from：正要离开的路由对象；next：路由的控制参数；
next一共有四种调用方式：
next()：一切正常调用这个方法进入下一个钩子；
next(false)：取消路由导航，这时的url显示的是正要离开的路由地址；
next(‘/login’)：当前路由被终止，进入一个新的路由导航（路由地址可以自由指定）
next(error)：路由导航终止并且错误会被传递到router.onError()注册过的回调中；
我们一般是用全局钩子来控制权限，像什么进页面没有登录就跳登录页，需要用户达到什么级别才能访问当前页面都是属于页面权限控制，都是可以通过beforeEach钩子函数来实现：
main.js（全局钩子函数我们一般是在main.js中进行书写）：
AfterEach：
AfterEach和beforeEach一样都是属于全局守卫钩子，都是在main.js中进行调用；其中AfterEach比beforeEach少一个next参数；
to：即将要进入的路由对象；
from：正要离开的路由对象；
afterEach()我们一般用来重置页面滚动条位置：
假如我们有一个页面很长，滚动后其中的某个位置后跳转，这时新的页面的滚动条位置就会在上一个页面停留的位置；这个时候我们就可以利用afterEach进行重置：
路由独享的钩子函数：
beforeEneter：
路由独享顾名思义就是指定的路由才有这些钩子函数，通常这类路由独享的钩子函数我们是在路由配置文件中进行配置，只能设置改变前的钩子，不能设置改变后的钩子
上述代码理解为只有进入/page1才会触发beforeEnter这个钩子，如果进入其他页面，是不触发的；
组件内的钩子函数：
beforeRouteEnter(to,from,next)：
在路由进入前调用，因为此时的vue实例还没有创建，所以beforeEnter是唯一一个不能使用this的钩子函数；
to:即将要进入的路由对象；
from：正要离开的路由对象；
next：路由控制参数
beforeRouteUpdate(to,from,next):
在路由发生修改的时候进行调用，比如我们上一篇文章讲到的动态路由传参，这种情况我们的beforeRouteUpdate也是会被调用的；
to:即将要进入的路由对象；
from：正要离开的路由对象；
next：路由控制参数；
beforeRouteLeave(to,from,next):
在路由离开该组件时调用；
to:即将要进入的路由对象；
from：正要离开的路由对象；
next：路由控制参数
注意：beforeRouteEnter因为触发的时候vue实例还没有创建，所以这个钩子函数中不能使用this，而beforeRouteUpdate和beforeRouteLeave都是可以访问到实例的，因为当这两个函数触发的时候实例都已经被创建了；
当调用组件内的钩子函数的时候，我们通常是在组件内部进行调用，举个例子：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/157729.html