如何在 Vue 3 中使用 router-view 使某些组件“保持活动”？

Question

我创建了一个由两个主要组件组成的小应用程序，我使用 vue 路由器在组件之间进行路由。

第一个组件称为 MoviesList，第二个组件称为 Movie。我已将它们注册到routes js 文件中。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: MoviesList
  },

  {
    path: '/:movieId',
    name: 'Movie',
    component: Movie
  }
  
]

我的 App.vue 模板如下所示

<template>
   <router-view></router-view>
</template>

如何使 MovieList 组件缓存起来，或者说它是用<keep-alive>标签包裹的？期望的结果是缓存 MovieList 组件，而不缓存 Movie 组件。

我想这样做，因为 MovieList 组件有一个在 Mounted() 钩子上运行的方法，每当我切换路由并返回时，该方法都会再次运行，因为组件被重新渲染。

Answer 1

试试这个include="MoviesList"，或者exclude="Movie"也可以

<router-view v-slot="{ Component }">
  <keep-alive include="MoviesList">
    <component :is="Component" />
  </keep-alive>
</router-view>

Answer 2

尝试使用keep-aliveinsiderouter-view并根据当前组件有条件地渲染它：

<router-view v-slot="{ Component }">
 <template v-if="Component.name==='movie-list'">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
 </template>
<template v-else>
     <component :is="Component" />
</template>

</router-view>