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

Posted 2023-02-15

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

【英文标题】：Vue Keep-Alive - Component App Header won't stay alive during route changes

【发布时间】：2020-07-06 23:48:19

【问题描述】：

我将我的 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 是您可能已经知道的插件。如果您需要其他任何东西，请告诉我，非常感谢您的帮助！

提前致谢

【参考方案1】：

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

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

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

【讨论】：

非常感谢！ :) 我的 App.vue 包含一个 而 Dashboard.vue 是带有 App Header 和另一个 的组件，所以我没有意识到每次更改路由时都会重新创建 Dashboard.vue，我只是移动了AppHeader 到 App.vue 的主要组件，带有 v-if 以检查 $route.path 是否以 /dashboard/ 开头，然后才会显示