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

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