首先我们先了解路由守卫:
路由守卫有点类似于ajax的请求拦截,就是请求发送之前先给你拦截住一些事情之后再去发送请求,同样这里的理由守卫意思差不多;简单理解为就是你进路由之前,首先把你拦住,对你进行检查;当然,路由守卫不仅仅只是在你进入之前拦住你,还有其他钩子函数进行其他操作;
vue-reuter提供了三大类钩子函数来实现路由守卫
1.全局钩子函数(router.beforeEach,router.afterEach)
2.路由独享的钩子函数(beforeEnter)
3.组件内的钩子函数(beforeRouterEnter,beforeRouterUpdate,beforeRouterLeave)
先来看一下全局钩子函数:
全局钩子函数:
beforEach:
一共接受三个参数,分别是to、from、next ;to:即将进入的路由对象;from:正要离开的路由对象;next:路由的控制参数(下一个)
next一共有四种调用方式:
next():一切正常调用这个方法进入下一个钩子;
next(false):取消路由导航,这时的url显示的是正要离开的路由地址;
next(’/login’):当前路由被终止,进入一个新的路由导航(路由地址可以自由指定)
next(error):路由导航终止并且错误会被传递到router.onError()注册过的回调中;
我们一般用全局钩子来控制权限,比如说进页面没有登录就跳转到登录也,余姚用户达到什么级别才能访问当前页面都是属于页面权限控制,都是可以通过beforeEach钩子函数实现:
全局钩子函数我们一般是写在main.js中
// 进入路由前方法勾子router.beforeEach((to, from, next) => {console.log(to, 前置第一个参数)console.log(from, 前置第二个参数)console.log(next, 前置第三个参数)/to 目标路由from 源路由next 跳转到下一个路由*/