为什么我的 Vue js 应用在路由到其他组件时会失去焦点？

Question

我有一个 vuejs 应用程序，当路由改变时它会失去焦点。 当站点加载标题组件的第一个元素时，它是焦点（完美），这正是我想要的。 但是，当我导航到网站上的任何其他链接并点击选项卡时，焦点永远不会转到标题组件。 如果我删除页脚，页面会像预期的那样专注于页眉组件。 当我添加页脚时，焦点会中断吗？

我曾尝试在每个组件被销毁（beforeDestroy）之前专注于另一个区域，但它不起作用。 我还尝试在模板中添加更多 div 并专注于组件，但这没有用。

我需要使用观察者吗？

我的临时解决方案是重新加载页面两次，这有效但非常俗气，因为 API 被调用两次。

任何帮助将不胜感激。

路由器正在像这样加载...

Vue.use(Router)

export default new Router({
routes: [
{
  path: '/',    
  component: landingPage,  //works fine
  }, 
  { path: '/home', component: HomePage }, //does not load properly
  { path: '/search', component: SearchPage }, //does not load properly
  { path: '/about', component: AboutPage } //does not load properly

下面是模板，以及组件的加载...

<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 () {
 // `this` points to the vm instance
  console.log('app before create')
 },
created: function () {
 // `this` points to the vm instance
console.log('app created')
},
beforeMount: function () {
// `this` points to the vm instance
console.log('app before mount')
},
 mounted: function () {
 // `this` points to the vm instance
 console.log('app mounted')
},
beforeDestroy: function () {
 // `this` points to the vm instance
 console.log('app before destroy')
},
destroyed: function () {
// `this` points to the vm instance
console.log('app destroyed')
 }
}
</script>

Answer 1

似乎焦点管理现在不是 Vue Router 开发人员的优先事项。 他们承认存在局限性，但问题已经很老了，而且活动也不是很好。

您可以尝试自己解决这个问题，也可以使用专门为解决此问题而量身定制的路由器库....