vue3页面缓存解决方案 keepalive

页面缓存解决方案

keep-alive

1. //*.vue
<template>
<router-link to:"/" />
<router-link to:"/about" />
//固定写法
<router-view v-slot={Component}>
    <keep-alive :include="openedTabs" :exclude="[]">// include 要缓存的  exclude 不缓存的
    	<component :is="Component"/>
    </keep-alive>
</router-view>
//固定写法
</template>
<script>
	export default {
        data(){
			return {
                openedTabs:['about']
            }
        }
    }
</script>

2. //about.vue

<script>
    export default {
        name:'about' // 这里组件名用来缓存区分
    }
</script>