一:摘要:使用vue开发单页面应用,如何解决页面缓存问题(尤其在手机端),如何才能做到 新打开的页面 获取最新数据,返回上一个页面获取最新的缓存页面数据?
二:页面打开和缓存流程:
页面顺序
:
A页面(首页) B页面(列表) C页面(详情) D页面(评论) .......
从 首页->评论 缓存: A 打开 B B 打开 C C 打开 D D 打开 ...
缓存 A 缓存B 缓存C 缓存D
B获取新数据 C获取新数据 D获取新数据 ...获取新数据
从 ...->
首页 缓存:
... 返回 D D 返回 C C 返回 B B 返回 A
显示D的缓存 显示C的缓存 显示B的缓存 显示A的缓存
三:为了解决上面的缓存流程问题,需要了解的知识:
1:keep-alive 组件; 说明: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们;
|- include 属性 说明: 只要include包含组件name则缓存下来; 官方解释:允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
|- exclude 属性 说明: 只要exclude包含组件name则不缓存下来; 官方解释:组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
2: 路由配置参数中的 scrollBehavior 滚动行为,主要记录滚动位置的,我们不仅可以利用来记录缓存页面滚动的位置,还可以利用 savedPosition 知道页面到底是前进 还是 后退
04 | scrollBehavior: function (to, from, savedPosition) { |
09 | if (savedPosition || typeof savedPosition === 'undefined' ) |
12 | if (savedPosition) { return savedPosition } |
3:vue 生命周期 中的 2个钩子 activated 和 deactivated
activated keep-alive 组件激活时调用 下面简单讲解下,建议看vue官方文档细致了解下
deactivated keep-alive 组件停用时调用 下面简单讲解下,建议看vue官方文档细致了解下
啥意思呢?如果不使用 keep-alive,我们经常在 created 中执行页面打开前的动作,比如:ajax获取数据;
不使用 keep-alive 打开页面 执行 created
使用 keep-alive 打开页面 执行 created 之后又会执行 activated ,如果此时返回上一页(就是缓存的页面)那么只执行 activated
再解释下: 就是使用了 keep-alive 打开新页面会执行 created+activated 2个钩子 ,如果返回到缓存的页面,此时缓存页面不执行 created了,如果此时你业务需要返回 alert(1),那么这个 alert(1),只能放在activated中,
放在created中无效;
四:互联网上我也看了有好几个解决方案,但都有问题,不是最佳方案,我研究vue源码后总结了完美方案,写出来,方便大家开发项目,互相学习+吐槽;
五:下面就用代码来演示步骤
第一步:router.js 新建路由
16 | component: resolve => require([ "@/views/test/index" ], resolve) |
24 | tabs:[ 'tab1' , 'tab2' , 'tab3' ] |
26 | component: resolve => require([ "@/views/test/tab1" ], resolve) |
34 | tabs:[ 'tab1' , 'tab2' , 'tab3' ] |
36 | component: resolve => require([ "@/views/test/tab2" ], resolve) |
44 | tabs:[ 'tab1' , 'tab2' , 'tab3' ] |
46 | component: resolve => require([ "@/views/test/tab3" ], resolve) |
55 | component: resolve => require([ "@/views/test/content" ], resolve) |
第二步:打开 APP.vue 页面 注意:这里的 cachePageName 一定是组件name,不是路由name(必须每个组件都加上name,组件name必须写成和路由name一样)
html代码:
1 | < keep-alive :include = "cachePageName" > |
2 | < router-view v-if = "$route.meta.keepAlive" ></ router-view > |
4 | < router-view v-if = "!$route.meta.keepAlive" ></ router-view > |
js代码:
11 | return this .$store.state.cachePageName; |
16 | window.addEventListener( 'beforeunload' , function (){ |
18 | that.$store.commit( 'resetcachePageName' ,that.$route.name); |
第三步:这里需要用到vuex,如果没安装的请自行安装vuex,这里不做解释;
01 | const store = new Vuex.Store({ |
07 | resetcachePageName(state, res){ |
08 | state.cachePageName = res; |
11 | addcachePageName(state, res){ |
12 | if (state.cachePageName == '' ){ |
13 | state.cachePageName = res; |
15 | let arr = state.cachePageName.split( ',' ); |
16 | if (res && typeof res === 'string' ) { |
17 | let i = arr.indexOf(res); |
19 | state.cachePageName = state.cachePageName+ ',' +res; |
25 | delcachePageName(state, res){ |
26 | let arr = state.cachePageName.split( ',' ); |
27 | if (res && typeof res === 'string' ) { |
28 | let i = arr.indexOf(res); |
31 | state.cachePageName = arr.join(); |
第四步:修改路由中 scrollBehavior 滚动行为,在前进 和 后退 中动态删除 和 新增需要缓存的组件
05 | scrollBehavior: function (to, from, savedPosition) { |
10 | if (savedPosition || typeof savedPosition === 'undefined' ) |
15 | if ( typeof from.meta.tabs !== 'undefined' && from.meta.tabs.length > 0) |
20 | from.meta.tabs.map( function (vo,index){ |
21 | store.commit( 'delcachePageName' ,vo); |
30 | store.commit( 'delcachePageName' ,from.name); |
35 | if (savedPosition) { return savedPosition } |
42 | store.commit( 'addcachePageName' ,to.name); |
第五步:如果还是不明白,可以加我qq:957987132,互相学习交流。