Vue Keep-Alive - 组件应用程序标头在路由更改期间不会保持活动状态

Question

我将我的 vue 应用程序的主页定义为如下所示：

<div class="wrapper">
    <keep-alive>
      <app-header></app-header>
    </keep-alive>
    <router-view></router-view>
</div>

<script>
import appHeader from '../components/Header';

export default {
  components: {
    appHeader
  }
/* etc... */
}

我的app UI基本上是从这个组件开始的，有很多不同的路由和子路由路径来显示很多页面，但是在所有页面（组件）中我想在页面顶部显示app-header。

问题是我最近注意到，每点击一个按钮（这会改变 vue-router 到另一个页面的路由），app-header 会被重新创建（调用 created() 生命周期钩子函数）

我真的不明白为什么，既然我加了keep-alive，就不应该渲染一次吗？

请帮我解决这个问题，我被卡住了，我确实研究了整个互联网。

请注意！我不希望路线保持活力，只希望应用标头本身

以下是查看我的更多代码的链接，这可能有助于您更好地理解：

1) App.vue (Pastebin)

2)Dashboard.vue (Pastebin)

3)Router files (Pastebin)

请注意，在 Vue 的 main.js 中，我导入了路由器并将它的第一个参数放在像“new Vue({router, store, vuetify, render: h => h(App)}).$mount 这样的对象中（'＃应用程序'）;”。 “App”是发布的 App.vue 的导入，而 vuetify 是您可能已经知道的插件。如果您需要其他任何东西，请告诉我，非常感谢您的帮助！

提前致谢

Answer 1

<keep-alive> 用于保存动态组件的状态，即<component :is="myComponent">

使用<router-link to="/myroute"> 或$router.push('/myroute') 在路由之间移动，router-view 之外的非动态组件将保持其状态。

这是一个简单的演示：https://jsfiddle.net/ellisdod/uzj8317m/