路由钩子函数 – 蓝色星空岛 https://dlovel.com 只要仰望天空,世界就会变得很大,蓝色星空岛,技术博客,资源,工具,文章,生活 Mon, 18 Mar 2024 08:24:16 +0000 zh-Hans hourly 1 https://wordpress.org/?v=7.1.2 https://dlovel.com/wp-content/uploads/2022/04/cropped-cropped-微信图片_20210720153146-80x80.jpg 路由钩子函数 – 蓝色星空岛 https://dlovel.com 32 32 简述vue-router 路由钩子函数是什么?执行顺序是什么? https://dlovel.com/%e7%ae%80%e8%bf%b0vue-router-%e8%b7%af%e7%94%b1%e9%92%a9%e5%ad%90%e5%87%bd%e6%95%b0%e6%98%af%e4%bb%80%e4%b9%88%ef%bc%9f%e6%89%a7%e8%a1%8c%e9%a1%ba%e5%ba%8f%e6%98%af%e4%bb%80%e4%b9%88%ef%bc%9f/ https://dlovel.com/%e7%ae%80%e8%bf%b0vue-router-%e8%b7%af%e7%94%b1%e9%92%a9%e5%ad%90%e5%87%bd%e6%95%b0%e6%98%af%e4%bb%80%e4%b9%88%ef%bc%9f%e6%89%a7%e8%a1%8c%e9%a1%ba%e5%ba%8f%e6%98%af%e4%bb%80%e4%b9%88%ef%bc%9f/#respond Tue, 19 Mar 2024 00:23:00 +0000 https://dlovel.com/?p=851 Vue Router 路由钩子函数是在导航过程中执行的一系列函数,用于控制路由的跳转、权限验证、数据加载等操作。在 Vue Router 中,主要有全局前置守卫、路由独享的守卫、组件内的守卫等不同类型的路由钩子函数。

执行顺序如下:

  1. 全局前置守卫:全局前置守卫通过 router.beforeEach 注册,在导航触发之前执行,可以用来进行全局的导航守卫逻辑,比如权限验证、登录状态检查等。如果有多个全局前置守卫,它们将按照注册的顺序依次执行。
  2. 路由独享的守卫:路由独享的守卫通过在路由配置中的 beforeEnter 字段中定义,在进入该路由前执行。这些守卫只对特定的路由生效。
  3. 组件内的守卫:组件内的守卫包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave,分别在组件进入、更新和离开时执行。这些守卫可以用来在组件级别控制路由导航相关的逻辑。
  4. 全局解析守卫:全局解析守卫通过 router.beforeResolve 注册,在导航被确认之前执行。可以用来在导航被确认之前执行异步操作或者修改导航信息。
  5. 全局后置钩子:全局后置钩子通过 router.afterEach 注册,在导航完成之后执行。可以用来进行一些页面跳转后的清理工作或者埋点统计。

总的来说,路由钩子函数可以帮助我们在路由导航的不同阶段执行逻辑,实现路由跳转的控制、权限验证、数据加载等功能。根据不同的需求,可以选择合适的钩子函数来实现相应的功能。

]]>
https://dlovel.com/%e7%ae%80%e8%bf%b0vue-router-%e8%b7%af%e7%94%b1%e9%92%a9%e5%ad%90%e5%87%bd%e6%95%b0%e6%98%af%e4%bb%80%e4%b9%88%ef%bc%9f%e6%89%a7%e8%a1%8c%e9%a1%ba%e5%ba%8f%e6%98%af%e4%bb%80%e4%b9%88%ef%bc%9f/feed/ 0