路由导航守卫

路由导航守卫有哪些:

全局守卫

组件内守卫

独享守卫

1.全局守卫

beforeEach 全局前置守卫

beforeResolve 全局解析守卫

afterEach 全局后置守卫

在创建实例的过程中,我们可以定义全局守卫:

2.独享守卫

beforeEnter 就是放到routes中定义的:

const routes = [

{

name: 'user',

component: User

beforeEnter: (to, from) => {

}

}

]

//beforeEnter: removeQueryParams, removeHash, 可以接受函数数组,removeQueryParams,removeHash为自定义的函数

注意点是独享守卫在路由参数改变但是路由本身地址没有变化的情况下是不会再次触发的。

3.组件内守卫

beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

beforeRouteEnter: 组件对应路由被验证前调用,不能获取组件实例this

beforeRouteUpdate:在当前组件路由改变时,但是组件本身被复用时调用。可以访问this。

beforeRouteLeave:在导航离开当前组件路由时调用,可以访问this

Vue3中setup 中调用可以通过api onBeforeRouteUpdate和onBeforeRouteLeave分别添加update和leave守卫

注意一个事情是beforeRouteEnter中如果想要拿到this实例可以通过next回调函数

beforeRouteEnter: (to, from, next) => {

next(vm => { //这里vm相当于组件实例this,可以正常访问到组件内数据

})

}

但是next回调被调用时已经时组件路由被读取解析并记录后才调用的,就是如果你要在回调中去重定向路由,那么你当前页面的路由也是在路由记录中的。

完整的导航解析流程:

1.已经失活的组件调用beforeRouteLeave

2.调用全局前置守卫beforeEach

3.调用复用组件的beforeRouteUpdate

4.在路由配置里调用beforeEnter

5.解析异步路由组件

6.调用被激活组件内beforeRouteEnter

7.调用全局解析守卫beforeResolve

8.导航被确认

9.调用全局后置守卫afterEach

10.触发Dom更新

12.调用beforeRouteEnter守卫中传给next的回调函数,创建好的组件实例会作为回调函数的参数传入

综上所述,Vue Router中的导航守卫是非常灵活且强大的功能,我们可以使用全局守卫、路由守卫和组件内守卫,来实现各种自定义的逻辑。在日常开发中,我们可以根据具体需求,灵活运用这些守卫,以达到更好的用户体验和功能实现。

总结起来,导航守卫是Vue Router中非常重要的功能,它可以帮助我们在路由切换过程中做一些自定义的逻辑处理。通过全局守卫、路由守卫和组件内守卫,我们可以实现各种各样的功能,例如路由拦截、权限验证、路由切换动画等。在实际项目开发中,合理使用导航守卫,能够提高开发效率和用户体验。

相关推荐
Hilaku几秒前
为什么 Cloudflare 能做到毫秒级冷启动,而其它云厂商却不行?
前端·javascript·程序员
2301_794461579 分钟前
JavaScript 基础知识点详解
前端·javascript·html
HjhIron12 分钟前
在浏览器中跑DeepSeek-R1:用React+WebGPU实现端侧AI推理
前端·ai编程
早期的虫儿有鸟吃25 分钟前
vue2--Vuex 模块化
开发语言·前端·javascript
C++、Java和Python的菜鸟39 分钟前
第5章 后端Web基础 (MySQL基础)
前端·mysql·adb
门前大桥下.1 小时前
HTML-01我的第一个网页
前端·html
我是大卫1 小时前
【图】React源码解析-从数据结构、依赖追踪机制、值传播与更新触发、以及性能陷阱与优化,深挖useContext的底层原理
前端·react.js·源码
谭光志1 小时前
深入浅出 RAG:用一个可运行的 Demo 讲透完整链路
前端·后端·ai编程
Cobyte1 小时前
使用 JavaScript 实现有限状态机的经典问题
前端·javascript·vue.js
道友可好1 小时前
前端工程师的 AI 时代生存指南
前端·人工智能·后端