效果:

页面缓存使用了keep-alive
在主页中:
<transition name="move" mode="out-in">
<keep-alive :include="tagsList">
<router-view></router-view>
</keep-alive>
</transition>
include中可以存放数组,存放打开页面的name ,此处就是把页面当做一个组件,动态的获取可以缓存的页面。(每个页面写name这个很重要,并且name要和router文件夹下配置的路由name一致);
还需要有一个bus.js文件 , 非父子组件通信的时候用到。
import Vue from 'vue';
const bus = new Vue();
export default bus;
bus.$on('tags', res); //取
bus.$emit('tags',tagsList); //存
tags.vue页面
点击事件和关闭事件都要最后都要bus.$emit('tag'.tagsList)。
可能不完善的小demo。
本文介绍如何在Vue项目中使用keep-alive组件进行页面缓存,提高用户体验。通过在router-view上包裹keep-alive并指定include参数,实现特定页面的缓存。同时,利用bus.js文件解决非父子组件间的通信问题,确保缓存页面状态的一致性。
&spm=1001.2101.3001.5002&articleId=89485773&d=1&t=3&u=3c4f7c105a9e404f999a7f8ec933479b)
72

被折叠的 条评论
为什么被折叠?



