javascript - 如何在 Vue 3 中使用路由器 View 制作某些组件 "keep-alive"？

Question

我创建了一个由两个主要组件组成的小应用程序，并且我正在使用 vue 路由器在组件之间进行路由。
第一个组件称为 MoviesList，第二个组件称为 Movie。
我已经在路由 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() Hook 上运行的方法，并且每当我切换路由并返回时，该方法再次运行，因为组件被重新渲染。

Answer 1

试试这个include="MoviesList" , 或 exclude="Movie"也工作

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