【前端】【Nuxt3】Nuxt3的生命周期

路由导航和中间件执行顺序

1. 路由导航开始

2. 中间件执行顺序：

   • 全局中间件（middleware/*.global.js）
   • 布局中间件（在definePageMeta中定义的布局级中间件）
   • 页面中间件（在definePageMeta中定义的页面级中间件）
   • 动态添加的中间件（使用addRouteMiddleware）

3. 页面/组件生命周期

服务器端(SSR)阶段：

• 中间件执行完成
• setup()
• 数据获取（useFetch()/useAsyncData()）
• 服务器端渲染HTML

客户端激活(Hydration)阶段：

• 初始HTML加载
• 中间件再次执行（客户端导航时）
• setup()
• onBeforeMount()
• onMounted()

客户端导航时：

1. 路由改变触发导航
2. 中间件重新执行（按上述顺序）
3. 离开组件的销毁钩子：
   • onBeforeUnmount()
   • onUnmounted()
4. 新组件的创建和挂载：
   • setup()
   • onBeforeMount()
   • onMounted()

特殊情况

1. 布局变化：

   • 如果导航涉及布局变化，旧布局会被销毁，新布局会被创建

2. 中间件返回值：

   • 如果中间件返回false或调用abortNavigation()，导航会被取消
   • 如果中间件返回navigateTo()，会重定向到新路由并重启导航流程

3. 错误处理：

   • 任何阶段发生错误，会渲染错误页面并调用onErrorCaptured钩子

这个顺序确保了中间件在组件生命周期开始前执行，让您能在组件处理前拦截或修改路由行为。