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基本上就是该仪表板，具有许多不同的路由和子路由路径以显示许多页面，但是在所有页面（组件）中，我都希望在页面顶部显示应用程序标题。

问题是我最近注意到，单击每个按钮（将vue-router的路由更改为另一个页面）后，将重新创建应用程序标头（调用了created（）生命周期挂钩函数）

我真的不明白为什么，因为我添加了保持活动状态，所以不应该渲染一次吗？

请帮我解决这个问题，我被困住了，我从字面上研究了整个互联网。

预先感谢

Answer 1

keep-alive仅在<keep-alive>标记包裹的部分中有效。在这里，仅app-header组件将保持活动状态。如果需要将此方法应用于路线中的所有组件，则必须将<router-view>放在<keep-alive>内。

例如：

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

现在，保持活动状态将适用于所有路线。

Vue保持活动状态-路线更改期间组件不会保持活动状态

1 个答案: