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

Posted 2023-02-22

【中文标题】为啥我的 Vue js 应用在路由到其他组件时会失去焦点？

【英文标题】：Why does my Vue js app lose focus when routing to other components?为什么我的 Vue js 应用在路由到其他组件时会失去焦点？

【发布时间】：2020-04-11 05:22:09

【问题描述】：

我有一个 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>

【参考方案1】：

目前看来焦点管理不是 Vue Router 开发人员的首要任务。他们承认这些限制，但issue 已经很老了，而且它的活动不是那么好。

您可以尝试解决这个by yourself 或使用router library 量身定制来解决这个问题....