前言
keep-alive可以使之前使用过的组件不销毁,实现组件的状态保持需求。但在vue2和vue3中的用法不同。
一、vue2中使用
<template>
<div id="app">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
二、vue3中使用
<template>
<div id="app">
<!-- keep-alive的vue3新写法 -->
<router-view v-slot="{Component}">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</div>
</template>