5 分钟带你实现一个可控制缓存销毁的 keepAlive 组件

最新推荐文章于 2024-08-11 19:57:16 发布

蚂蚁二娘

最新推荐文章于 2024-08-11 19:57:16 发布

阅读量3.2k

点赞数

文章标签：缓存 vue.js 前端

本文链接：https://blog.csdn.net/web2022050901/article/details/127396912

版权

本文详细介绍了如何实现一个可控制缓存销毁的 keepAlive 组件，通过在 Vue 路由中添加缓存标识，创建自定义的 app-router-view，并利用 include 属性结合组件名来实现手动清除页面缓存。文中提到了 v-slot 的作用、:is 的使用以及在 Pinia 或 Vuex 中管理缓存列表的方法，通过路由守卫维护缓存状态。

摘要由CSDN通过智能技术生成

简介

关于 Vue 的 KeepAlive

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例

我们可以利用这一特性来解决当路由切换时页面组件被销毁的问题，常见的业务场景有表单缓存，列表缓存定位，返回时保持状态等，网上有很多教程涉及，但是对如何自主控制缓存的组件销毁这一块大多讲的不是很清晰。

本文会以初学者的角度出发，一步一步带你了解 keepAlive 的特性并实现一个可以自主控制什么时候销毁缓存页面的 keepAlive 组件 —— app-router-view

思路

在编写这一组件时我们的思路是先在路由配置中加入缓存标识，然后在<router-view> 组件里加上<KeepAlive>标签，然后通过缓存标识判断是否缓存该组件，为了操作缓存的销毁，我们会用到 include 属性，通过操作 include 里的组件名实现自主销毁组件，以下是具体实现步骤。

在 Routes 中添加 keepAlive 缓存标识

const routes = [
  {
      path: '/index',
      name: 'index',
      component: () => import('@/views/index.vue'),
      meta: {
          title: '首页',
          keepAlive: false // 缓存标识
      }
  }
]

创建 app-router-view 组件

<template>
  <router-view v-slot="{ Component, route }">
      <keep-alive>
          <component :is="Component" v-if="route.meta.keepAlive"/>
      </keep-alive