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

标签 javascript vue.js vue-router vuejs3 vue-router4

我创建了一个由两个主要组件组成的小应用程序,并且我正在使用 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/

相关文章:

javascript - 如何使用传单标记作为 nuxt-link?

laravel - 你好,我使用 laravel 和 Vue js 我的作者项目它工作正常,但是这个错误?

javascript - jQuery Slider 不适用于 Android Chrome 浏览器

javascript - Onclick 事件 Javascript 和 JQuery

javascript - 产品页面上的 prestashop 下一张和上一张图像按钮

javascript - 无法读取未定义的Vue js的属性 '_router'

javascript - 如何在路由中动态加载组件

javascript - 为什么 array[length] 返回列表的第一个元素?

javascript - 语法错误 : let is disallowed as a lexically bound name

vue.js - 通过 vue 中的计算属性过滤数据