在 Vue SPA 页面上重置焦点

Question

我正在使用 Vue 路由器应用程序开发 Vue SPA，我正在尝试通过在更改路线后重置焦点状态来模拟 oage 重新加载。这是我的代码：

router.beforeEach((to, from, next) => {
  document.activeElement.blur();
  next();
});

我的问题是，焦点确实 returns 在更改后立即指向 body 元素，但在下一个焦点上它会回到原来的位置，在本例中是页脚，而不是“跳到内容”按钮。我尝试将焦点明确设置为 window，但它也不起作用。有谁知道如何真正重置焦点流，让它真正重新开始？任何帮助将不胜感激！

Answer 1

基于this article，我在之前添加了tabindex -1并在之后删除了它。它成功了

router.beforeEach((to, from, next) => {
  document.body.setAttribute("tabindex", "-1");
  document.body.focus();
  document.body.removeAttribute("tabindex");
  next();
});

Answer 2

Vue 网站现在在每次导航后的“跳过 Link”上有一些 re-focusing 的官方文档：

https://vuejs.org/guide/best-practices/accessibility.html#skip-link

备注：

因为每次导航发生时它都关注跳过 Link，这意味着如果它是一个 auto-hiding link，就像 Vue 文档中的那样，它将“弹出每次导航到不同页面时打开"。
我也尝试过专注于页面主体的方法（如），但是我遇到了这个问题以及 MacOS 的 VoiceOver 功能。重现此问题的步骤： 1. 使用 VoiceOver 控件导航到 link（例如 ctrl+option+left/right） 2. 使用 VoiceOver 控件（ctrl+option+space）打开 link 3.在新页面上，如果您继续使用 VoiceOver 控件导航，它将不会从顶部开始，而是从您在页面上离开的地方继续。
在我的测试中，VoiceOver 控件似乎会改变焦点，.focus() 方法需要应用于默认情况下可以接收焦点的元素（如 link）。

在 Vue SPA 页面上重置焦点

Reset focus on Vue SPA page

javascript

accessibility

focus

single-page-application

vue.js