路由导航守卫

路由导航守卫有哪些:

全局守卫

组件内守卫

独享守卫

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

相关推荐
不思念一个荒废的名字1 分钟前
【黑马JavaWeb+AI知识梳理】Web前端开发 - Vue3 / ElementPlus
前端
月明长歌4 分钟前
Selenium中隐式等待(Implicit Wait)和显式等待(Explicit Wait)的区别
前端·javascript·selenium
姜太小白6 分钟前
【前端】JavaScript字符串执行方法总结
开发语言·前端·javascript
GIS之路13 分钟前
GDAL 实现影像合并
前端·python·信息可视化
心易行者23 分钟前
Claude Code + Chrome:浏览器层面的AI编程新范式已至
前端·chrome·ai编程
半兽先生25 分钟前
解决使用jsPDF实现表格数据导出pdf功能时中文乱码问题
前端·vue.js·elementui
qq_4061761443 分钟前
吃透JS异步编程:从回调地狱到Promise/Async-Await全解析
服务器·开发语言·前端·javascript·php
幻云20101 小时前
Python深度学习:筑基与实践
前端·javascript·vue.js·人工智能·python
@大迁世界1 小时前
停止使用 innerHTML:3 种安全渲染 HTML 的替代方案
开发语言·前端·javascript·安全·html
缘木之鱼1 小时前
CTFshow __Web应用安全与防护 第二章
前端·安全·渗透·ctf·ctfshow