应用场景
跳转下一个页面后,返回当前页面,或者在多个页面之间切换,保留页面中的所有状态,常见的就是填写到一半的表单。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的写法上是有差异的,这里写一下分享给刚入门不知道的朋友