Vue-router 路由钩子在生命周期的体现

server/2025/1/16 2:03:55/

一、Vue-Router导航守卫

有的时候,需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录。 为此有很多种方法可以植入路由的导航过程:全局的,单个路由独享的,或者组件级的

  1. 全局路由钩子

vue-router全局有三个路由钩子;

  • router.beforeEach 全局前置守卫 进入路由之前
  • router.beforeResolve 全局解析守卫(2.5.0+)在 beforeRouteEnter 调用之后调用
  • router.afterEach 全局后置钩子 进入路由之后

具体使用∶

  • beforeEach(判断是否登录了,没登录就跳转到登录页)
javascript">router.beforeEach((to, from, next) => {  let ifInfo = Vue.prototype.$common.getSession('userData');  // 判断是否登录的存储信息if (!ifInfo) { // sessionStorage里没有储存user信息    if (to.path == '/') { //如果是登录页面路径,就直接next()      next();    } else { //不然就跳转到登录      Message.warning("请重新登录!");     window.location.href = Vue.prototype.$loginUrl;    }  } else {    return next();  }
})
  • afterEach (跳转之后滚动条回到顶部)
javascript">router.afterEach((to, from) => {  // 跳转之后滚动条回到顶部  window.scrollTo(0,0);
});
  1. 单个路由独享钩子

beforeEnter 如果不想全局配置守卫的话,可以为某些路由单独配置守卫,有三个参数∶ to、from、next

javascript">export default [    {        path: '/',        name: 'login',        component: login,        beforeEnter: (to, from, next) => {          console.log('即将进入登录页面')          next()        }    }
]
  1. 组件内钩子

beforeRouteUpdate、beforeRouteEnter、beforeRouteLeave

这三个钩子都有三个参数∶to、from、next

  • beforeRouteEnter∶ 进入组件前触发
  • beforeRouteUpdate∶ 当前地址改变并且改组件被复用时触发,举例来说,带有动态参数的路径foo/∶id,在 /foo/1 和 /foo/2 之间跳转的时候,由于会渲染同样的foa组件,这个钩子在这种情况下就会被调用
  • beforeRouteLeave∶ 离开组件被调用

注意点,beforeRouteEnter组件内还访问不到this,因为该守卫执行前组件实例还没有被创建,需要传一个回调给 next来访问,例如:

javascript">beforeRouteEnter(to, from, next) {      next(target => {        if (from.path == '/classProcess') {          target.isFromProcess = true        }      })    
}

二、Vue路由钩子在生命周期函数的体现

  1. 完整的路由导航解析流程(不包括其他生命周期)

  • 触发进入其他路由。
  • 调用要离开路由的组件守卫beforeRouteLeave
  • 调用局前置守卫∶ beforeEach
  • 在重用的组件里调用 beforeRouteUpdate
  • 调用路由独享守卫 beforeEnter。
  • 解析异步路由组件。
  • 在将要进入的路由组件中调用 beforeRouteEnter
  • 调用全局解析守卫 beforeResolve
  • 导航被确认。
  • 调用全局后置钩子的 afterEach 钩子。
  • 触发DOM更新(mounted)。
  • 执行beforeRouteEnter 守卫中传给 next 的回调函数
  1. 触发钩子的完整顺序

路由导航、keep-alive、和组件生命周期钩子结合起来的,触发顺序,假设是从a组件离开,第一次进入b组件∶

  • beforeRouteLeave:路由组件的组件离开路由前钩子,可取消路由离开。
  • beforeEach:路由全局前置守卫,可用于登录验证、全局路由loading等。
  • beforeEnter:路由独享守卫
  • beforeRouteEnter:路由组件的组件进入路由前钩子。
  • beforeResolve:路由全局解析守卫
  • afterEach:路由全局后置钩子
  • beforeCreate:组件生命周期,不能访问tAis。
  • created;组件生命周期,可以访问tAis,不能访问dom。
  • beforeMount:组件生命周期
  • deactivated:离开缓存组件a,或者触发a的beforeDestroy和destroyed组件销毁钩子。
  • mounted:访问/操作dom。
  • activated:进入缓存组件,进入a的嵌套子组件(如果有的话)。
  • 执行beforeRouteEnter回调函数next。
  1. 导航行为被触发到导航完成的整个过程
  • 导航行为被触发,此时导航未被确认。
  • 在失活的组件里调用离开守卫 beforeRouteLeave。
  • 调用全局的 beforeEach守卫。
  • 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
  • 在路由配置里调用 beforeEnteY。
  • 解析异步路由组件(如果有)。
  • 在被激活的组件里调用 beforeRouteEnter。
  • 调用全局的 beforeResolve 守卫(2.5+),标示解析阶段完成。
  • 导航被确认。
  • 调用全局的 afterEach 钩子。
  • 非重用组件,开始组件实例的生命周期:beforeCreate&created、beforeMount&mounted
  • 触发 DOM 更新。
  • 用创建好的实例调用 beforeRouteEnter守卫中传给 next 的回调函数。
  • 导航完成

http://www.ppmy.cn/server/1737.html

相关文章

Day38: 动态规划 LeedCode:509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯 蓝桥杯: 更小的数

对于动态规划问题,拆解为如下五步曲 确定dp数组(dp table)以及下标的含义确定递推公式dp数组如何初始化(容易数组溢出)确定遍历顺序举例推导dp数组 509. 斐波那契数 斐波那契数 (通常用 F(n) 表示)形成的序列称为 斐…

acwing算法提高之图论--最近公共祖先

目录 1 介绍1.1 向上标记法1.2 倍增法1.3 Tarjan法 2 训练 1 介绍 本博客用来记录"对于有根图中,求最近公共祖先"的题目。 求解方法: 向上标记法。每次求两个结点的最近公共祖先的时间复杂度是O(N)。由于时间复杂度较高,通常不用…

云原生数据库海山(He3DB)PostgreSQL版核心设计理念

本期深入解析云原生数据库海山PostgreSQL版(以下简称“He3DB”)的设计理念,探讨在设计云原生数据库过程中遇到的工程挑战,并展示He3DB如何有效地解决这些问题。 He3DB是移动云受到 Amazon Aurora 论文启发而独立自主设计的云原生数…

docker部署mongoDB

测试环境一般直接使用docker部署mongo,速度比较快 Docker部署MongoDB是一种高效且灵活的方式,用于在容器化环境中快速安装和运行MongoDB数据库。以下是关于Docker部署MongoDB的简要介绍: Docker是一个开源的应用容器引擎,它可以让…

应用回归分析,r语音,第4章,思考与练习,BOX-COX变换,答案,代码

续上1篇。 4.9(3)R^2=0.66,小于普通最小2乘的R^2=0.705, (4)y1^=0.58+0.00095x,等级相关系数-0.17,p值0.21>0.05,说明异方差已经消除, y1=sqrt(y) lm4.4<-lm(y1~x,data = Book4_9) summary(lm4.4) Call: lm(formula = y1 ~ x, data = Book4_9)Residuals:Min …

HCIP-Datacom(H12-821)题库补充(4月12日)

最新 HCIP-Datacom&#xff08;H12-821&#xff09;完整题库请扫描上方二维码访问&#xff0c;持续更新中。 在BGP进程下&#xff0c;Aggregate命令中的detail&#xff3f;suppressed关键字的作用是以下哪一项&#xff1f; A&#xff1a;抑制生成的聚合路由下发IP路由表 B&…

ant design vue + jeecgboot 实现本地上传视频及播放视频功能

文章目录 上传视频1. 上传按钮事件2. 上传按钮触发3. 声明变量visible_uploadVideov4. 上传视频弹窗5. 保存视频6. 关闭上传视频弹窗 播放视频1. 获取上传后的视频1.1 插槽2. 触发播放视频事件3. 播放视频弹窗4. 暂停视频 上传视频 1. 上传按钮事件 点击上传按钮事件 --这个地…

Kubernetesr容量规划: 如何合理设置集群资源

本文译自 Kubernetes capacity planning: How to rightsize the requests of your cluster 原文链接&#xff1a;https://sysdig.com/blog/kubernetes-capacity-planning/ Kubernetes 容量规划是基础架构工程师面对的主要挑战之一&#xff0c;正确理解 Kubernetes 的资源要求和…