记录一下vue2和vue3中如何配置keep-alive及写法上的差异

应用场景

跳转下一个页面后，返回当前页面，或者在多个页面之间切换，保留页面中的所有状态，常见的就是填写到一半的表单。h5的tabbar页面缓存，避免重复加载数据。

主要实现思路

这个东西很常见，动态路由一般将是否缓存页面的配置放在数据库中。这里写在本地方便看。

• 在路由的meta中设置该页面是否缓存

  {
        path: 'xxx',
        name: 'xxx',
        component: () => import('@/views/xxxx/xxxx.vue'),
        meta: { title: "创建xxx", isCache: true },
    }

• 拿到route实例进行配置

//vue2 
this.$route
//vue3 
const route = useRoute();

• 设置keep-alive组件的key为用户的token或者当前登录用户的userId，避免退出系统重新登陆与上个用户混淆

<keep-alive :key="userStore.userToken" :key="userStore.userToken">

vue3主要实现代码

	<router-view v-slot="{ Component }">
		<keep-alive :key="yourUserToken">
			<component :is="Component" v-if="route.meta.isCache" :key="route.fullPath" />
		</keep-alive>
		<component :is="Component" v-if="!route.meta.isCache" />
	</router-view>

vue2主要实现代码

<div>
	<keep-alive :key="yourUserToken">
		<router-view v-if="$route.meta.isCache" />
	</keep-alive>
	<router-view v-if="!$route.meta.isCache" />
</div>

总结

3和2的写法上是有差异的，这里写一下分享给刚入门不知道的朋友