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基本上是从此组件开始的，具有许多不同的路由和子路由路径以显示许多页面，但是在所有页面（组件）中，我想在页面顶部显示应用程序标题。 / p>

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

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

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

请注意！我不希望路由保持活动，只有应用程序标头本身

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

1）App.vue (Pastebin)

2）Dashboard.vue (Pastebin)

3）Router files (Pastebin)

请注意，在Vue的main.js中，我导入了路由器，并将其第一个参数放在诸如“ new Vue（{router，store，vuetify，render：h => h（App）}）之类的对象中。（'#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保持活动状态-路线更改期间，组件应用程序标头不会保持活动状态

1 个答案: