7

我创建了一个由两个主要组件组成的小应用程序，并且我正在使用 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() 挂钩上运行的方法，每当我切换路由并返回时，该方法再次运行，因为组件被重新渲染。

4

3 回答 3

9

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

<router-view v-slot="{ Component }">
  <keep-alive include="MoviesList">
    <component :is="Component" />
  </keep-alive>
</router-view>
于 2021-01-17T12:54:37.000 回答
3

尝试使用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>
于 2021-01-07T20:21:29.650 回答
1

对于 Vue.js 2.0，这个例子对我帮助很大！

https://jsfiddle.net/Linusborg/L613xva0/4/

基本上，关键是确保您在include中使用组件名称：

<keep-alive include="componentname">
  <router-view></router-view>
</keep-alive>

const MyComponent = {
  name: 'componentname',
  template: '<div>My awesome component!</div>'
}

const routes = [
  {
    path: '',
    component: MyComponent
  }
]
于 2021-05-19T20:08:03.223 回答