如何在 Vue 3 中使用路由器视图使某些组件“保持活动”？

Posted 2023-02-22

【中文标题】如何在 Vue 3 中使用路由器视图使某些组件“保持活动”？

【英文标题】：How to make certain component "keep-alive" with router-view in Vue 3?

【发布时间】：2021-04-13 13:57:11

【问题描述】：

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

【参考方案1】：

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

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

【讨论】：

确保您的组件已设置名称 (export default name: '...') - 基于组件文件名的默认名称将不起作用。此外，有关路由器视图新插槽 api 的更多信息在这里：next.router.vuejs.org/api/#router-view-s-v-slot

另外 - 如果您使用脚本设置，您需要在 <script setup> 和 export default name: 'MoviesList' 上方添加另一个 <script> 标记，因为否则它不起作用。 script setup 没有明确设置组件名称。见github.com/vuejs/rfcs/discussions/273?sort=top

【参考方案2】：

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

<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>

【参考方案3】：

对于 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
  
]