Vue.js Vue在更改管线时重新创建父组件

我在一个项目中将Vue.js与Vue router一起使用，问题是包含router视图的组件在路由更改时被破坏。这意味着页面上的所有其他组件都将被销毁，因此整个过程看起来就像是页面刷新

我最近开始使用Vue，我正在使用的应用程序中充满了大量遗留代码，很难简化为基本代码，因此我很难找出问题所在

我试图用小提琴再现这个问题，但没有成功。 以下是模板代码：

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

<template id="tricky-place">
  <div>
    <h1>Tricky place</h1>
    <ul>
      <li>
        <router-link to="/panel1">Panel1</router-link>
      </li>
      <li>
        <router-link to="/panel2">Panel2</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<template id="tricky-place-panel1">
  <div>
    <h2>Panel1</h2>
  </div>
</template>

<template id="tricky-place-panel2">
  <div>
    <h2>Panel2</h2>
  </div>
</template>

这是小提琴：

这是加载小提琴时的控制台日志，单击Panel1，然后单击Panel2：

TrickyPlace - created
TrickyPlace - mounted

TrickyPlacePanel1 - created
TrickyPlacePanel1 - mounted
TrickyPlace - updated

TrickyPlacePanel2 - created
TrickyPlacePanel1 - destroyed
TrickyPlacePanel2 - mounted
TrickyPlace - updated

这是意料之中的

下面是我在应用程序中运行相同代码时相同操作序列的控制台日志：

TrickyPlace - created
TrickyPlace - mounted

TrickyPlace - created
TrickyPlacePanel1 - created
TrickyPlace - destroyed
TrickyPlacePanel1 - mounted
TrickyPlace - mounted

TrickyPlace - created
TrickyPlacePanel2 - created
TrickyPlacePanel1 - destroyed
TrickyPlace - destroyed
TrickyPlacePanel2 - mounted
TrickyPlace - mounted

TrickyPlace会在每次路线更改时被销毁和创建，而不是像在小提琴中一样被更新

换句话说，考虑到我的应用程序中出现的图，在状态为Mounted的红色圆圈中，执行流不采用“数据更改时”路径，而是直接转到“调用vm.$destroy（）时”

我尝试将路由器的模式设置为“历史”，但其行为相同。应用程序中没有对$destroy（）的调用。我没有在路由器视图上设置：密钥绑定

关于如何继续查找问题，为什么为父级调用created/destroy，而不是仅仅更新，有什么想法吗

---

谢谢。

刚刚发现问题。组件层次结构中有一个

的

：key=“$route.fullPath”

如上所述：

如果将

键

绑定到

$route.fullPath

，它将始终“强制” 更换

元件/部件 导航事件发生的时间

TrickyPlace - created
TrickyPlace - mounted

TrickyPlace - created
TrickyPlacePanel1 - created
TrickyPlace - destroyed
TrickyPlacePanel1 - mounted
TrickyPlace - mounted

TrickyPlace - created
TrickyPlacePanel2 - created
TrickyPlacePanel1 - destroyed
TrickyPlace - destroyed
TrickyPlacePanel2 - mounted
TrickyPlace - mounted