前端路由跳转本身不产生宏/微任务，但伴随的数据获取、守卫钩子、DOM更新等异步操作会落入事件循环不同队列；需理解各生命周期阶段对应的任务类型，合理安排代码位置以避免渲染异常、DOM操作失效或竞态问题。
前端路由跳转（如 Vue Router、React Router 或原生 History API）本身不直接产生宏/微任务，但跳转过程常伴随异步操作（数据获取、守卫钩子、DOM 更新），这些操作会落入事件循环的不同队列中。若不注意任务调度，容易出现“跳转了但页面没更新”“守卫里 Promise 没等完就渲染”“滚动位置错乱”等问题。关键不是“手动协调”，而是理解路由生命周期各阶段对应的任务类型，并合理安排代码位置。
路由守卫中的异步逻辑：微任务优先于渲染
在 导航守卫（如 Vue Router 的 beforeEach、React Router 的 loader 或 shouldReload）中返回 Promise，本质是注册一个微任务：
- 守卫函数本身是同步执行的，但
return fetch(...)或return new Promise(...)会让整个导航等待该 Promise resolve —— 这个 resolve 回调属于微任务； - 浏览器会在微任务清空后才触发路由组件挂载和 DOM 渲染；
- 因此，数据加载完成后再跳转，能保证组件拿到数据再渲染，避免空屏或二次请求。
跳转后立即操作 DOM：避开宏任务延迟
使用 router.push() 或 history.pushState() 后，想立刻滚动到顶部或聚焦某个元素，不能直接写 document.body.scrollTop = 0：
- 因为路由跳转触发的组件卸载/挂载是宏任务级别的（如 React 的 commit 阶段、Vue 的 patch），此时 DOM 可能尚未更新；
- 直接操作旧 DOM 会失败或无效；
- 正确做法是用
queueMicrotask(() => { /* 操作新 DOM */ })或Promsie.resolve().then(...)，确保在新组件挂载完成、DOM 已就绪后再执行。
避免在微任务中触发新跳转导致竞态
比如在 onMounted 中发请求，成功后又调用 router.push：
立即学习“Java免费学习笔记（深入）”；
- 这个
router.push是同步调用，但内部会注册一个宏任务来更新 URL 和触发导航； - 如果用户快速连续点击两个链接，前一个请求的微任务还没执行完，后一个已开始，可能导致跳转到错误页面；
- 解决方案：加请求取消机制（AbortController）、或用状态标记（如
isUnmounted）、或把跳转逻辑移到更可控的时机（如守卫中统一处理）。
服务端渲染（SSR）场景下的任务对齐
在 Nuxt、Next.js 等框架中，路由跳转可能涉及客户端 hydration 和服务端数据同步：
- 服务端返回的 HTML 已含首屏数据，客户端首次渲染应尽量复用；
- 若在
mounted中又发一次相同请求（未判断是否已有服务端数据），这个请求的 Promise.then 就是微任务，可能覆盖服务端数据； - 建议：在守卫或组件 setup 中优先读取服务端注入的数据（如
window.__INITIAL_STATE__），仅当缺失时才发起客户端请求。
