I am building a Vue SPA with the Vue router and I am attempting to simulate a page reload by resetting the focus state after changing routes. The following is my code snippet:
router.beforeEach((to, from, next) => {
document.activeElement.blur();
next();
});
The issue I am facing is that although the focus does return to the body element right after the route change, on the next focus it goes back to where it was previously - in this case, the footer - instead of focusing on the "skip to content" button as desired. I have tried explicitly setting the focus to the window but it did not work either. Does anyone have an idea on how to reset the focus flow completely so that it truly starts over? Any help would be greatly appreciated!