我创建了一个由两个主要组件组成的小应用程序,并且我正在使用 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 上运行的方法,并且每当我切换路由并返回时,该方法再次运行,因为组件被重新渲染。
最佳答案
试试这个include="MoviesList"
, 或 exclude="Movie"
也工作
<router-view v-slot="{ Component }">
<keep-alive include="MoviesList">
<component :is="Component" />
</keep-alive>
</router-view>
关于javascript - 如何在 Vue 3 中使用路由器 View 制作某些组件 "keep-alive"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65619181/