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`
  }
}

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