I am encountering an issue with my Vue.js app where the focus is lost when changing routes. Initially, when the site loads, the first element of the header component is correctly in focus as desired. However, when navigating to a different link on the site and using the tab key, the focus does not shift to the header component. Interestingly, if I remove the footer component, the page focuses on the header component as intended. But adding the footer breaks the focus.
I have attempted to refocus on another area before each component is destroyed using the beforeDestroy lifecycle hook, but that did not solve the problem. Additionally, adding more divs to the template and trying to focus on the component itself did not work either.
Should I consider using a watcher to address this issue?
As a temporary solution, I have resorted to reloading the page twice which does work, but it feels like a makeshift fix as the API gets called twice in the process.
Any assistance or guidance on this matter would be greatly appreciated.
The router configuration currently being used is:
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: landingPage, // functioning correctly
},
{ path: '/home', component: HomePage }, // experiencing issues with loading
{ path: '/search', component: SearchPage }, // facing loading challenges
{ path: '/about', component: AboutPage } // encountering loading problems
Below is the template structure and component loading logic:
<template>
<div>
<my-header/>
<router-view />
<my-footer/>
</div>
</template>
<script>
import mylayout from 'my-layout'
import '../node_modules/my-layout/dist/my-layout.css'
export default {
components: {
'my-header': mylayout.components['my-header'],
'my-footer': mylayout.components['my-footer']
},
name: 'app',
data: function () {
return {
state: 'initial'
}
},
beforeCreate: function () {
console.log('app before create')
},
created: function () {
console.log('app created')
},
beforeMount: function () {
console.log('app before mount')
},
mounted: function () {
console.log('app mounted')
},
beforeDestroy: function () {
console.log('app before destroy')
},
destroyed: function () {
console.log('app destroyed')
}
}
</script>