使用 :key 保留路由器转换，同时确保子基础视图不刷新

Question

我有一个应用程序，我在路由器视图上使用

:key="$route.path"

进行转换。但问题是，使用

:key

最终会刷新子路由基础视图，最终会再次调用某些 API。

路线：

{
  path: "/some-route",
  component: () => import("@/views/SomeView/SomeViewBase.vue"),
  children: [
    {
      path: "view/:entity_id",
      name: "some-entity-details",
      component: () => import("@/views/SomeView/SomeEntityDetails.vue"),
    },
    {
      path: "update/:entity_id",
      name: "some-entity-update",
      component: () => import("@/views/SomeView/SomeEntityUpdate.vue"),
    },
  ]
}

SomeViewBase.vue：

<template>
  <div>
    <div class="flex justify-between items-center">
      // Some content here
    </div>

    <RouterView />
  </div>
</template>

<script setup lang="ts">
// Some logic here along with some API calls
</script>

问题是子路由之间的切换也会导致基本视图刷新。从 App.vue 中删除

:key

解决了问题，但我丢失了动画。

我预计，如果路由与子数组中的路由匹配，则使用子路由只会刷新子路由视图。

Answer 1

您的要求有冲突。

一方面，您希望 Vue 将每个路径视为一个单独的组件实例，这会触发每个路径的进入和离开动画。

但是，同时，您希望它们是同一个组件实例，以便您在

mounted

或

created

内进行的一些 API 调用仅在第一次使用组件时触发。

你不能两者兼得：你要么使用单独的路由组件实例，要么不使用。

要获得这两种行为，我建议保留

$route.path

键并将 API 调用移至存储区，或移至 DOM 树中包含

<RouterView />

的更高组件，以便在

 时不会重新运行调用<RouterView />

改变。

如果您需要更多帮助，您可能需要在codesandbox.io或类似的网站上创建一个可运行最小可重现示例，我可以将其分叉来举例说明上述原则。
您当前的代码无法运行。它缺乏重要的细节，例如应用程序结构、路由转换、包版本等......