vue保姆级教程----深入了解 Vue3路由守卫

 鸿蒙专栏：想学鸿蒙的，冲

C语言专栏：想学C语言的，冲

 VUE专栏：想学VUE的，冲这里

 CSS专栏：想学CSS的，冲这里

Krpano专栏：想学VUE的，冲这里

上述专栏，都在不定期持续更新中！！！！！！！！！！！！！

目录

✨ 前言

全局前置守卫

全局解析守卫

全局后置钩子

路由独享守卫

组件内守卫

完整的导航解析流程

 实现原理

实现机制

全局守卫

组件内守卫

next 函数

总结

✨ 结语

---

 

✨ 前言

        导航守卫是Vue Router中非常重要的一个功能,它可以让我们在路由导航期间进行Hooks操作,比如登录校验、数据预取、页面跳转取消等。合理利用好导航守卫可以大大提高路由的可控性。

        本文将首先介绍导航守卫的种类,包括全局守卫、独享守卫、组件内守卫。然后结合代码示例详细探讨每个守卫的使用场景和方法。

        此外,文中还会剖析导航守卫的内部实现原理,了解其工作流程和 Hooks 调用顺序。守卫函数其实是基于路由系统内部的 Navigation Guards 系统实现的。通过分析其机制,可以更深入理解守卫的运行规则。

        最后,本文将给出一些实战技巧,帮助开发者思考在什么场景下使用哪种类型的导航守卫,以提高实际项目中的开发效率。

        如果你想深入理解导航守卫,或者想在Vue项目中合理利用它们加强路由控制,本文将是一个很好的学习参考。结合示例代码可以快速上手应用。让我们开始探索导航守卫的世界吧!

全局前置守卫

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

全局前置守卫在每次路由导航前被调用,常用于登录校验、权限检查等。

全局解析守卫

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

在 navigation 被确认之前调用,组件内守卫和异步路由组件被解析之后调用。

全局后置钩子

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

导航被确认时调用,不再像前置守卫那样改变导航。

路由独享守卫

const routes = [{
  path: '/about',
  component: About,
  beforeEnter: (to, from) => {
    // ...
  }
}]

在进入某个路由前被调用。

组件内守卫

const Foo = {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 `this`
    // 因为当守卫执行前,组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

组件内守卫只在进入/离开当前组件的路由时被调用。

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫(2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

以上就是 Vue Router 4 中导航守卫的详细介绍,可以利用好这些钩子函数对路由进行更多控制。

 实现原理

实现机制

• 导航守卫的核心是路由系统内部的 Navigation Guards 机制。包括 beforeEach、beforeResolve 等函数。
• 导航过程中会依次调用这些 Guard 函数,并传入 to、from 等路由信息。
• 每个 Guard 都可以调用 next() 继续pipieline,或者 next(false) 中断导航。

全局守卫

• router.beforeEach等注册的守卫会被添加为 Global Before Guards。
• 会按顺序调用整个 Guard 链,最终执行 router.push 触发导航。

组件内守卫

• 组件内的 beforeRouteEnter 等会作为 Component Guards 添加到 Guard 链中。
• 会在激活组件时调用,执行顺序遵循整个导航解析流程。

next 函数

• next 可以接收 false、location 或 error 作为参数来控制流程。
• 内部通过 callHook 继续执行 Guard 链,或中断导航。

总结

• 导航守卫利用了路由系统内部的导航解析流程和钩子函数。
• 明确其调用时机和 next 函数的作用非常重要,才能灵活运用。

✨ 结语

        在这篇文章中,我们全面地介绍了Vue Router中的导航守卫,包括:

• 不同类型的导航守卫以及使用场景
• 导航守卫的内部实现原理
• next 函数的作用方式
• 导航解析流程和守卫调用顺序

        导航守卫是一个非常强大的路由功能,可以让我们在页面导航的每一个时机进行控制或干预。

        正确掌握并应用导航守卫,可以防止非法访问,处理异步数据,实现路由权限管理等等。

        希望这篇文章能让你对导航守卫有一个系统的理解,在Vue项目中能灵活地把控路由流程,处理导航中的各种情形。

        如果你有任何问题,欢迎在评论区与我互动讨论。祝你的Vue之路越走越好!

        我们改日再会！