vue3中＜ keep-alive ＞页面实现缓存及遇到的问题

vue3中< keep-alive >页面实现缓存及遇到的问题

实现原理：keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。实现不同路由是否缓存只需要设置对应路由参数keepAlive为true，不需要缓存的路由设置false。如果是多级路由你要设置子路由缓存的话，它的父级路由的keepAlive也必须为true。

keep-alive的参数

参数	原理
include	它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项
exclude	任何名称与 `exclude` 匹配的组件都不会被缓存
max	最大缓存实例数

javascript 复制代码

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

一：keep-alive设置缓存

javascript 复制代码

<template>
  <div id="app">
    <!--需要缓存的keep-alive配置 展示内容-->
    <keep-alive :include="getKeepAliveNames">
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <!--不需要缓存的keep-alive 配置 展示内容-->
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

二：router,多级router页面缓存

javascript 复制代码

  //首页
  {
    path: "/home",
    name: "home",
    component: component: () => import("@/views/home/index.vue")，
    //配置keep-alive 的状态  
    meta: {
      keepAlive: true, //需要缓存的页面,
      title:"首页"
    },
  },
  {
   path: "/user",
   name: "user",
   component:  component: () => import("@/views/user/index.vue"),
   //配置keep-alive 的状态  
   meta: {
     keepAlive: true, //需要缓存的页面
     title:"用户"
   },
   children:[
		  {
			   path: "/userOne",
			   name: "userOne",
			   component:  component: () => import("@/views/userOne/index.vue"),
			   //配置keep-alive 的状态  
			   meta: {
			     keepAlive: true, //需要缓存的页面,
			     title:"用户1"
			   },
			 },
			 {
			   path: "/userTwo",
			   name: "userTwo",
			   component:  component: () => import("@/views/userTwo/index.vue"),
			   //配置keep-alive 的状态  
			   meta: {
			     keepAlive: true, //需要缓存的页面,
			     title:"用户2"
			   },
			 },
	]
 },

三：查看页面是否缓存成功

1：查看 onActivated ,onDeactivated 判断 keepalive是否生效

typescript 复制代码

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
})
</script>

2：使用vue插件判断缓存是否生效

四：遇到的问题

写了以上步骤缓存都失效，查看了原因：是因为keep-alive里面的名称和组件的名称没有匹配上。

解决办法是在组件页面给他命名，这样就解决了。

typescript 复制代码

import { defineOptions} from 'vue';
defineOptions({ name: 'userRegister' })//与路由的name要一致

如果遇到defineOptions报错

更新vue和vue-router版本就行;我的版本是："vue": "3.3.4","vue-router": "^4.0.12",然后再npm i安装一下再重启项目就可以了。