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

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... */
}

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

问题是我最近注意到，单击每个按钮（将 vue-router 的路由更改为另一个页面），app-header 会重新创建（created() 生命周期挂钩函数是叫）

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

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

请注意！我不希望路线保持活力，只有应用程序 header 本身

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

1) App.vue (Pastebin)

2) Dashboard.vue (Pastebin)

3) Router files (Pastebin)

请注意，在 Vue 的 main.js 中，我导入了路由器并将其第一个参数放在 object 中，例如 "new Vue({router, store, vuetify, render: h => h(App)}).$mount('#app');"。 "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/

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

Vue Keep-Alive - Component App Header won't stay alive during route changes

keep-alive

vue.js

vue-router

vue-component

vuejs2