路由导航守卫

路由导航守卫有哪些:

全局守卫

组件内守卫

独享守卫

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

相关推荐
Larcher3 小时前
React Router 不只是页面跳转:从 SPA 路由到权限守卫的完整实践
javascript·后端
Larcher3 小时前
大模型为什么每次回答都不一样?一文搞懂 Temperature、Top K 与 Top P
javascript·后端
用户938515635076 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战
前端·设计模式·typescript
CodeSheep6 小时前
稚晖君公司人事大变动,来了!
前端·后端·程序员
鱼樱前端7 小时前
用 AI 做内容变收入
前端·人工智能·ai编程
eric-sjq7 小时前
10 分钟实战:用 0.6B 本地模型生成中文网页(WanlyFrontend + 编译器全流程)
javascript·机器学习·自然语言处理·html
浮生望7 小时前
React + TypeScript 组件设计进阶:从类型约束到无状态组件的三次进化
前端
To_OC7 小时前
LC 438 找到所有字母异位词:暴力超时后,我靠滑动窗口一招搞定
javascript·算法·leetcode
90后的晨仔7 小时前
Mac 开发 uni-app 终极方案:让安卓模拟器彻底脱离 Android Studio 独立运行
前端·vue.js
90后的晨仔8 小时前
别再搞混了!uni-app 中 node_modules 和 uni_modules 到底是什么关系?
前端