路由导航守卫

路由导航守卫有哪些:

全局守卫

组件内守卫

独享守卫

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

相关推荐
南风知我意95711 分钟前
【前端面试3】初中级难度
前端·javascript·面试
霍理迪15 分钟前
JS作用域与预解析
开发语言·前端·javascript
切糕师学AI18 分钟前
.NET Core Web 中的健康检查端点(Health Check Endpoint)
前端·kubernetes·.netcore
蓉妹妹24 分钟前
在React中使用Scroll嵌套Scroll,出现里面Scroll滚动条超出高度却滚动没反应的问题,解决方案添加nestedScrollEnabled
javascript·react native·react.js
东东51627 分钟前
校园求职招聘系统设计和实现 springboot +vue
java·vue.js·spring boot·求职招聘·毕设
rosmis39 分钟前
地铁病害检测系统软件改进记录-2-02
开发语言·前端·javascript
css趣多多43 分钟前
解决ui组件flex1容器底部被撑开的问题
前端
乔江seven1 小时前
【python轻量级Web框架 Flask 】2 构建稳健 API:集成 MySQL 参数化查询与 DBUtils 连接池
前端·python·mysql·flask·web
Alaaaaaaan1 小时前
[DevOps]使用github-action工具部署docker容器(实现提交代码一键推送部署到服务器)
服务器·前端·docker·容器·github
摘星编程1 小时前
在OpenHarmony上用React Native:Spinner自定义样式
javascript·react native·react.js