vue-router钩子函数和执行顺序-白红宇的个人博客

vue-router钩子函数和执行顺序

发布日期：2021-05-07 09:37:13 浏览次数：29 分类：精选文章

本文共 505 字，大约阅读时间需要 1 分钟。

vue-router钩子函数

vue路由钩子大致可以分为三类

全局钩子：beforeEach

beforeEach函数有三个参数：

to:router即将进入的路由对象

from:当前导航即将离开的路由

next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

单个路由

beforeEnter

组件内部

beforeRouteUpdate

beforeRouteLeave

beforeRouteEnter

在这里插入图片描述

执行结果截图如下

执行顺序：

1.导航被触发

2.在失活的组件里调用离开守卫

3.调用全局的beforeEach守卫

4.在重用的组件里调用boforeRouteUpdate守卫

5.在路由配置里调用beforeEnter

6.解析异步路由组件

7.在被激活的组件里调用beforeRouteEnter

8.调用全局的beforeResolve守卫

9.导航被确认

10.调用全局的afterEach钩子

11.触发DOM更新

12用创建好的实例调用 beforeRouteEnter 守卫中传给next的回调函数

上一篇：小米商城项目分析（上）

下一篇：数据库实践

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

推荐文章

2025版最新大模型开发流程（非常详细）零基础入门到精通，收藏这一篇就够了 2023-01-25

2025版最新大模型微调方法（非常详细）零基础入门到精通，收藏这篇就够了 2023-01-25

2025版最新大语言模型的指令微调，零基础入门到精通，收藏这篇就够了 2023-01-25

2025版最新小白学习大模型：什么是大模型？零基础入门到精通，收藏这篇就够了 2023-01-25

2025版最新常用黑客工具之【Nmap 教程基础】零基础入门到精通，收藏这篇就够了 2023-01-25

2025版最新渗透测试和黑客工具列表，零基础入门到精通，收藏这一篇就够了 2023-01-25

2025版最新网络安全等级保护测评指南，零基础入门到精通，收藏这篇就够了 2023-01-25

2025版最新运维怎么转行网络安全？零基础入门到精通，收藏这篇就够了 2023-01-25

2025版最新黑客学习网站（非常详细），零基础入门到精通，看这一篇就够了 2023-01-25

2025版网络工程11个高含金量证书（非常详细）零基础入门到精通，收藏这篇就够了 2023-01-25

2025自学成为黑客必读的5本书籍，带你从小白进阶成大佬 2023-01-25

23张图告诉你组建一个网络需要用到哪些硬件设备？路由器、交换机、防火墙是不是就够了？ 2023-01-25

#12 btrfs文件系统 2023-01-25

#3194. 去月球 2023-01-25

$scope angular在controller之外调用 2023-01-25

&和&&的区别 2023-01-25

(AS3)BitmapData.draw比BitmapData.copyPixel能做得更多 2023-01-25

asp.net MVC 强类型视图表单Ajax提交的注意事项 2023-01-25

canvas设置文字阴影 2023-01-26

Centos 5.3 ADSL拨号组建中小型企业网络 2023-01-26

白红宇的个人博客 - 记录点点滴滴的事 - 您是第 465743636 位访客