路由导航守卫

路由导航守卫有哪些:

全局守卫

组件内守卫

独享守卫

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

相关推荐
小程故事多_805 分钟前
用Agent与大模型实现Web项目全自动化生成:从需求到部署的完整落地方案
运维·前端·人工智能·自动化·aigc
千里马-horse8 分钟前
AsyncContext
开发语言·前端·javascript·c++·napi·asynccontext
勇往直前plus10 分钟前
Jackson 反序列化首字母大写字段映射失败的底层原因与解决方案
java·开发语言·前端
转转技术团队10 分钟前
基于微前端 qiankun 多实例保活的工程实践
前端·javascript·前端工程化
松涛和鸣10 分钟前
37、UDP网络编程入门
linux·服务器·前端·网络·udp·php
业精于勤的牙14 分钟前
最长特殊序列(一)
java·javascript·数据结构
毕设十刻26 分钟前
基于Vue的新生入学报道管理系统(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
期待のcode26 分钟前
JWT令牌
前端·javascript·spring boot·安全
南山安35 分钟前
LangChain 入门实战:从零搭建 AI 应用工作流
javascript·面试·langchain
星月心城36 分钟前
八股文-JavaScript(第二天)
开发语言·javascript·ecmascript