管理 SPA 导航后的焦点

目标

客户端导航后焦点仍停留在旧视图的链接上，令键盘与屏幕阅读器用户困惑。本配方在路由切换完成后把焦点移到新视图的 h1（并设置 tabindex=-1），使下一次 Tab 从新视图继续，再用 aria-live 区域播报新页面标题；提醒重定向场景应在最终路由稳定后再管理焦点。

步骤要点

1. 路由切换后把焦点移到新视图标题。
2. 为标题设置 tabindex=-1 以便聚焦。
3. 用 aria-live 区域播报新页面标题。
4. 在重定向的最终路由稳定后再管理焦点。

router.afterEach(() => {
  nextTick(() => {
    const main = document.querySelector('main h1');
    if (main) { main.setAttribute('tabindex', '-1'); main.focus(); }
  });
});

排错提示

• 重定向时过早聚焦会丢失。
• 焦点与播报同时做会重复通知。
• 聚焦标题并非普遍理解。

适用边界

• 需按框架集成。
• 播报可能被区域延迟。