vue-router 守卫 鉴权

①、守卫

路由守卫使用的方式有3种 ：全局的守卫 、 组件级路由守卫、单个路由规则独享的守卫

一、全局的守卫：

守卫所有的页面，写在router -> index.js文件中

router.beforeEach 全局前置守卫 进入路由之前

router.afterEach 全局后置钩子 进入路由之后

router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用

二、组件级路由守卫：

只守卫某一个页面，写在要守卫的组件里，跟data，methods同级

1. beforeRouteEnter
2. beforeRouteUpdata(2.2新增)
3. beforeRouteLeave

三、单个路由规则独享的守卫：

放在路由规则

beforeEnter(){}

路由守卫钩子函数里面的三个参数

to,from,next 这三个参数： to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。

next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。

next() 进入该路由。

next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。 next 跳转新路由&#x