在Vue SPA页面上重置焦点

Question

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

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

我的问题是，焦点确实会在更改后立即返回到body元素，但在下一个焦点上，它会回到原来的位置，在本例中是页脚，而不是"；跳到内容"；按钮我试着明确地将焦点设置为window，但也不起作用。有人知道如何将焦点流重置为真实的，这样它才能真正重新开始吗？任何帮助都将不胜感激！

Answer 1

基于本文，我在前面添加了tabindex -1，在后面删除了它。它成功了

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

Answer 2

Vue网站现在有一些官方文档可以重新关注；跳过链接"；每次导航后：

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

注：

1. 由于每次导航时都会关注Skip链接，这意味着如果它是一个自动隐藏的链接，就像Vue文档中的链接一样，它将"弹出式打开"；每次导航到不同的页面时
2. 我还尝试了专注于页面主体的方法(比如p-sara的答案(，但我遇到了这个问题和MacOS的VoiceOver功能。重现此问题的步骤：1。导航到VoiceOver控件(例如ctrl+option+left/right(2的链接。使用VoiceOver控件(ctrl+option+space(3打开链接。在新页面上，如果您继续使用VoiceOver控件导航，它将不会从顶部开始，而是从您在页面上停止的位置继续
3. 在我的测试中，VoiceOver控件似乎要更改焦点，.focus()方法需要应用于默认情况下可以接收焦点的元素(如链接(