vue保姆级教程----深入了解 Vue3路由守卫_vue3 路由守卫，2024最新网易前端面经

用户33914928060
140 阅读6分钟

TCP协议

  • TCP 和 UDP 的区别？
  • TCP 三次握手的过程？
  • 为什么是三次而不是两次、四次？
  • 三次握手过程中可以携带数据么？
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次？
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击？
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用？
  • TCP 的超时重传时间是如何计算的？
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认？
  • 如何理解 TCP 的 keep-alive？

浏览器篇

  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？

开源分享：docs.qq.com/doc/DSmRnRG…

🔔 组件内守卫

🔔 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中的导航守卫,包括:

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

  • 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

avatar
文章
阅读
粉丝