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开发人员的首要任务。他们承认有局限性，但是issue年代久远，在它上面的活动并不是那么好。

您可以尝试解决by yourself或使用专门解决此问题的router library。...

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

1 个答案: