时间戳

首页 > 解决方案 > Vue Keep-Alive - 应用程序标头在路由更改期间不会保持活动状态

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

问题描述

我将我的 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，就不应该渲染一次吗？

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

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

提前致谢

标签： javascriptvue.jsvue-componentvue-router

解决方案

推荐阅读