VUE差异路径上的相同组件实例

Question

我正在设计一个基于路由呈现页面的Vuejs应用。

例如

route = /，Component = Main.vue

<template>
  <div>
    <toolbar :user="user"></toolbar>
    <app-content></app-content> 
  </div>
</template>

route = /：user，组件= User.vue

<template>
  <div>
    <toolbar :user="user"></toolbar>    
    <userHeader></userHeader>
    <app-content></app-content> 
  </div>
</template>

显示页面时，工具栏组件将从服务器获取数据，问题是，当页面从/到/ user时，数据获取数据X 2，因为这是应用程序本身中的2个工具栏组件。 / p>

应如何解决此问题？有什么办法可以重用工具栏之类的共享组件实例？

还是我应该将设计放在一个整体中？ （使用v-if显示隐藏其他组件）

Answer 1

您应该在<toolbar />之外拥有<router-view></router-view>。

因此您的代码应如下所示：

<div id="app">
    <toolbar user="user" />
    <router-view />
</div>

使用此<toolbar />不会更改，即使您更改路线，也只会导致一次数据获取。