Vue3 keep-alive用法及说明

<template>
	<!-- 将（只）缓存组件name为a或者b的组件, 结合动态组件使用 -->
	<keep-alive include="a,b">
	  	<component :is="view"></component>
	</keep-alive>

	<!-- 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染) -->
	<keep-alive exclude="c"> 
	  	<component :is="view"></component>
	</keep-alive>
	
	<!-- 使用正则表达式，需使用v-bind -->
	<keep-alive :include="/a|b/">
	  	<component :is="view"></component>
	</keep-alive>

	<!-- 动态判断 -->
	<keep-alive :include="includedComponents">
		<router-view></router-view>
	</keep-alive>
	
	<!-- 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件 -->
	<keep-alive include="a,b" exclude="b"> 
	  	<component :is="view"></component>
	</keep-alive>

	<!-- 如果缓存的组件超过了max设定的值5，那么将删除第一个被缓存的组件 -->
	<keep-alive exclude="c" max="5"> 
	  <component></component>
	</keep-alive>
</template>

<script>
	import { ref,computed } from 'vue'
	import A from './A.vue'
	import B from './B.vue'
	import C from './C.vue'

	const view = ref('A')
	const includedComponents = computed(() => {
		return view.value
	})
</script>

<template>
  <div id="nav">
    <button @click='jumpHome'>home</button>
    <button @click='jumpAbout'>about</button>
  </div>
  <router-view v-slot="{ Component }">
    <keep-alive exclude='Home'>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script>
	export default {
		name: 'App'
	}
</script>

<script setup>
	import { useRouter } from 'vue-router'
	
	const router = useRouter()
	const jumpHome = () => {
		router.push({path:'/Home'})
	}
	const jumpAbout = () => {
		router.push({path:'/About'})
	}
</script>

const routes = [
	{
	  path: '/home',
	  name: 'Home',
	  meta: {
	  	keepAlive: true
	  },
	  component: () => import('../views/Home.vue')
	},
	{ 
	  path: '/About',
	  name: 'About',
	  meta: {
	  	keepAlive: true
	  },
	  component: () => import('../views/About.vue')
	}
]

<template>
	<div id="nav">
		<button @click='jumpHome'>home</button>
	    <button @click='jumpAbout'>about</button>
	</div>
  	<keep-alive>
    	<router-view v-if="route.meta.keepAlive"></router-view>
	</keep-alive>
	<router-view v-if="!route.meta.keepAlive"></router-view>
</template>

<script>
	export default {
		name: 'App'
	}
</script>

<script setup>
	import { useRouter,useRoute } from 'vue-router'
	
	const route = useRoute()
	const router = useRouter()
	const jumpHome = () => {
		router.push({path:'/Home'})
	}
	const jumpAbout = () => {
		router.push({path:'/About'})
	}
</script>

<script setup>
	import { beforeRouteLeave } from 'vue-router'
	
	beforeRouteLeave(to, from, next) {
	    to.meta.keepAlive = true;
	    next();
 		}
	}
</script>