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

我的应用 UI 基本上是这个仪表板，有许多不同的路由和子路由路径来显示许多页面，但在所有页面（组件）中，我想在页面顶部显示 app-header。

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

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

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

提前致谢

Answer 1

Rijosh 的回答仅适用于 Vue 2 及其路由器（Router v3.x）。如果有人使用 Vue 3（和 Router v4.x），那么 <keep-alive> 和 <router-view> 的代码如下所示：

<router-view v-slot="{ Component }">
   <keep-alive>
      <component :is="Component" />
   </keep-alive>
</router-view>

更多信息请参见文档here。

Answer 2

keep-alive 仅适用于由<keep-alive> 标签包裹的部分。在这里，只有app-header 组件会保持活动状态。如果您需要将此应用于路由中的所有组件，则必须将<router-view> 放入<keep-alive>。

例如：

  <keep-alive>
    <router-view></router-view>
  </keep-alive>

现在keep-alive将适用于所有路由。