需要的小伙伴可以收藏~

什么是路由守卫

路由守卫就是路由跳转过程中的一些钩子函数 ，在路由跳转的时候，做一些判断或其它的操作。 类似于组件生命周期钩子函数。

分类

路由守卫分为三种 ——分别是：全局路由守卫、组件路由守卫、独享路由守卫。

回调函数中的参数:

• to： 即将要进入的目标路由对象（到哪去）
• from： 即将要离开的路由对象（从哪离开）
• next(Function)：是否可以进入某个具体路由，或者是某个具体路由的路径

1.全局路由守卫

• beforeEach(to, from, next) 全局前置守卫，路由跳转前触发
• beforeResolve(to, from, next) 全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发
• afterEach(to, from) 全局后置守卫，路由跳转完成后触发

2.路由独享守卫

• beforeEnter(to,from,next) 路由对象单个路由配置 ，单个路由进入前触发

3.组件路由守卫

• beforeRouteEnter(to,from,next) 在组件生命周期beforeCreate阶段触发
• beforeRouteUpdadte(to,from,next) 当前路由改变时触发
• beforeRouteLeave(to,from,next) 导航离开该组件的对应路由时触发

详解

1.路由前置守卫 beforeEach(to, from, next)

const router = new VueRouter({
    
       ... })

router.beforeEach((to, from, next) => {
    
      
  // ...
})

从名字全局前置守卫不难理解，它是全局的，即对整个单页应用中的所有路由都生效，所以当定义了全局的前置守卫，在进入每一个路由之前都会调用这个回调，那么如果你在回调中对路由的跳转条件判断出错，简单点就是死循环…因为你遗漏了某种路由跳转的情况，守卫会一直执行。
所以在使用全局前置守卫的时候一定要判断清楚可能会出现的路由跳转的情况。

在路由跳转前触发，在实际项目中应用最多，主要是登陆验证和跳转权限判断

2.全局解析守卫 beforeResolve(to, from, next)

router.beforeResolve((to, from, next) => {
    
      
  // ...
})

类似于路由前置守卫 beforeEach(to, from, next)，也是路由跳转前触发，但它是同时在所有组件内守卫和异步路由组件被解析之后触发的

调用时机：在 beforeEach(to, from, next)和组件内beforeRouteEnter(to, from, next)之后，afterEach(to, from)之前调用

3.全局后置守卫 afterEach(to, from, next)

router.afterEach((to, from) => {
    
      
  // ...

与路由前置守卫 beforeEach(to, from, next)相对，路由跳转后触发，但它是同时在所有组件内守卫和异步路由组件被解析之后触发的

调用时机：在 beforeEach(to, from, next)和组件内beforeResolve (to, from, next)之后， beforeRouteEnter(to, from)之前调用

4.路由独享守卫 beforeEnter(to, from, next)

const router = new VueRouter({
    
      
  routes: [
    {
    
      
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
    
      
        // ...
      }
    }
  ]
})

与路由前置守卫 beforeEach(to, from, next)相同，但在beforeEach(to, from, next)后触发，只能针对一个页面使用。

5. 组件路由守卫 beforeRouteEnter(to, from, next)

const Foo = {
    
      
  template: `...`,
  beforeRouteEnter(to, from, next) {
    
      
    // 不能获取组件实例 
    // 因为当守卫执行前，组件实例还没被创建
  }

因为该守卫在组件创建之前阶段触发，那个时候组件还没有创建成功，所以这个守卫内不能使用this获取组件实例

调用时机：在全局守卫beforeEach(to, from, next)和独享守卫beforeEnter(to, from, next)之后，全局beforeResolve(to, from, next)和全局afterEach(to, from)之前调用

6. 组件路由守卫 beforeRouteUpdate(to, from, next)

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

调用时机：当前路由复用时

7. 组件路由守卫 beforeRouteLeave(to, from, next)

  beforeRouteLeave(to, from, next) {
    
      
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例
  }
}

通常用来禁止用户在还未保存修改前突然离开

调用时机：导航离开该组件的对应路由时调用

4.完整的导航解析流程

1.触发进入其它路由
2.调用要离开路由的组件守卫beforeRouteLeave
3.调用全局的前置守卫beforeEach
4.在重用的组件里调用 beforeRouteUpdate
5.在路由配置里的单条路由调用 beforeEnter
6.解析异步路由组件
7.在将要进入的路由组件中调用beforeRouteEnter
8.调用全局的解析守卫beforeResolve
9.导航被确认
10.调用全局的后置钩子afterEach
11.触发 DOM 更新mounted
12.执行beforeRouteEnter守卫中传给 next的回调函数

5.实例

router.beforeEach((to,from,next) => {
    
      
    NProgress.start()
    // 定义变量表示是否从后端接口中拿到token 拿到token即为true 反之为false
    const isLogin:Boolean = window.sessionStorage.token ? true : false;
   // 如果当前页面路由路径为/login（登录页面）或者/register（注册页面）
    if(to.path === "/login" || to.path === "/register"){
    
      
        next() // 则执行next()方法 跳转到下一个页面（自己设置）
    }else {
    
      
        // 如果当前页面不是上面两个页面的路径之一 则执行以下语句
        if(!isLogin) {
    
       // 进一步判断有没有获取到token 没有获取到则说明没有经过登陆操作
            message.warning("请先登录") //  弹出警告框提示
        }
        // 获取到了则跳转下一个页面（自定） 没有获取到则返回登录页面
        isLogin ? next() : next("/login") 
    }
})

效果展示：
正常登录成功：（弹窗提示：登陆成功）

不经过登录跳转其他页面：（弹窗提示：请先登录）

---

vue router相关的知识点和用法有很多，后期会不定期更新。 感兴趣的小伙伴可以订阅本专栏，方便后续了解学习。 觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

---