大白话vue路由守卫

末蓝、 2024-03-27 15:07 60阅读 0赞

路由守卫，我想大家心里都或多或少有点理解了吧，我简单的理解，就类似道路上的关卡，从哪里来，到哪里去在这个关卡里可以进行限制，官方一点的解释就是进行操作的鉴权，当操作与之条件匹配时，操作成功，当操作与之不匹配时，操作终止，作用就是是对路由进行权限控制。

**在Vue中，路由守卫分为三种：全局路由守卫、独享路由守卫以及组件内路由守卫，下面一个一个说。**

import router from './router/index'

### 1、全局路由守卫 ###

全局路由守卫一旦配置，那么作用范围就是所有的路由，全局路由又分为全局前置守卫和全局后置守卫

#### 1.1 全局前置守卫 ####

全局前置守卫，组件初始化时调用，每次路由切换之前调用，路由切换之前指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮，但B路由组件还没有被呈现在页面上的时候被调用。

//全局前置守卫
    router.beforeEach((to,from,next) =>{
      //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
      //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
      //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
    })

基于前置守卫的原理，鉴权的操作就写在前置守卫中

#### 1.2 全局后置守卫 ####

全局后置守卫，组件初始化时调用，每次路由切换之后调用，路由切换之后指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮B路由组件呈现到页面中后被调用。

router.afterEach((to,from) =>{
      //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
      //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
    })

### 2、独享守卫 ###

组件独享守卫是在进入组件时被调用,区别就在于，想对哪个路由进行权限控制就直接在其路由配置项中添加守卫，作用域也仅限于该路由

router.beforeEnter((to, from , next) =>{
      //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
      //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
      //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
    })

注意：全局路由守卫服务的是所有路由组件，而独享路由守卫只服务于被配置的单个路由组件

### 3、组件内守卫 ###

当使用路由规则进入该组件或离开该组件时，就会触发组件内守卫的调用，而组件内守卫的作用于范围也仅限于该组件

//进入守卫：通过路由规则，进入该组件时被调用
    beforeRouteEnter (to, from, next) {
      //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
      //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
      //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
    },
    //离开守卫：通过路由规则，离开该组件时被调用
    beforeRouteLeave (to, from, next) {
      //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
      //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
      //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
    }

beforeRouterLeave(),它并不像全局后置守卫一样在路由组件加载完成之后调用，而是在你切换出这个组件后被调用，也就是离开这个组件后被调用，在开发中，我们也可以使用beforeRouterLeave() 来完成某些操作，比如当我要切换出该组件事，我希望该组件的操作能暂停，而不是一直运行，只有当我切换回该组件时，又再次运行，这样的操作就可以配合着beforeRouteEnter() 来完成，也可以提高应用的性能