vue3.0 页面缓存正确打开方式

最近在做一款移动端的H5项目,如果项目中不做任何处理,类似从列表进入详情再返回这样的跳转会导致页面重新加载,试想一下如果列表已经加载了几十上百页了,就因为点进去详情再回来就要从头开始,用户碰到这种情况是不是很崩溃,所以对必要的页面做缓存就必不可少。

网上搜索缓存处理方案有很多,很多都采用Keep-alive对router-view做缓存,这样的处理方式简单又高效,在使用的过程中作为新手的我碰到了很多问题,先说下我的需求,我的需求是页面要有动画(移动端开发的我表示没有动画就相当于失去了灵魂),要么是包裹的方式不对,要么是不生效,鱼和熊掌一定都要有才行,以下是正确的打开方式

其中includeList是定义哪些页面需要缓存的集合,这里面包含的是组件的name,一切页面皆可作为组件

const includeList = ['NewsPage', 'VideoPage', 'MinePage'];

关于组件的name如何命名,点击这里看另一篇文章。

你可能感兴趣的:(vue3.0 页面缓存正确打开方式)