时间戳

首页 > 解决方案 > 为什么我的 Vue js 应用在路由到其他组件时会失去焦点？

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

问题描述

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

标签： javascriptvue.jsvuejs2vue-componentvue-router

解决方案

看起来焦点管理现在不是 Vue Router 开发人员的首要任务。他们承认存在局限性，但问题已经很老了，而且在这方面的活动并不是那么好。

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

推荐阅读