javascript - 在 Vue SPA 页面上重置焦点

Question

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

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

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

Answer 1

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

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