VUE 不同路径的相同组件实例答案

【问题标题】：VUE same component instance at difference routeVUE 不同路径的相同组件实例
【发布时间】：2019-03-12 22:29:52
【问题描述】：

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

例如对于

路由 = /，组件 = Main.vue

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

路由 = /:user, 组件 = User.vue

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

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

应该如何解决这个问题？这是重用工具栏等共享组件实例的任何方式吗？

或者我应该把设计放在一个完整的组件中吗？（使用 v-if 显示隐藏附加组件）

【问题讨论】：

【解决方案1】：

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

所以你的代码应该是这样的：

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

即使您更改路线，<toolbar /> 也不会更改，并且只会获取一次数据。

【讨论】：