模板网首页 > 建站教程 > vue教程,AngularJS教程 >  完美解决vue keep-alive 缓存问题正文

完美解决vue keep-alive 缓存问题

一:摘要:使用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 知道页面到底是前进 还是 后退
01const RouterConfig = {
02mode: "hash", //hash history
03routes: Routers,
04scrollBehavior: function (to, from, savedPosition) {
05// console.log(to) // to:要进入的目标路由对象,到哪里去
06// console.log(from) // from:离开的路由对象,哪里来
07// console.log(savedPosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
08// 从第二页返回首页时savedPosition为undefined
09if (savedPosition || typeof savedPosition === 'undefined') //后退
10{
11  //后退滚动到上一次位置
12  if (savedPosition) { return savedPosition }
13} else { //前进
14  //前进滚动到顶部
15  return {x:0,y:0}
16}
17}
18}
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 新建路由
01/*
02*
03* keepAlive 是否缓存页面,true缓存 false 不缓存
04* tabs 主要作用:解决tab之间路由跳转(一般值replace跳转),tab之间跳转应该不缓存页面,每次切换都是最新数据
05 tabs 类型是数组,如下图 tab1 和 tab2 和 tab3 其实是3个tab页面不同组件,那么路由replace跳转不需要缓存数据
06*
07*/
08const Routers =[
09 {
10     path: "/index",
11     name: "index",
12     meta: {
13       title: "首页",
14       keepAlive:true
15     },
16     component: resolve => require(["@/views/test/index"], resolve)
17 },
18 {
19     path: "/tab1",
20     name: "tab1",
21     meta: {
22       title: "我是tab1列表",
23       keepAlive:true,
24       tabs:['tab1','tab2','tab3']
25     },
26     component: resolve => require(["@/views/test/tab1"], resolve)
27 },
28 {
29     path: "/tab2",
30     name: "tab2",
31     meta: {
32       title: "我是tab2列表",
33       keepAlive:true,
34       tabs:['tab1','tab2','tab3']
35     },
36     component: resolve => require(["@/views/test/tab2"], resolve)
37 },
38 {
39     path: "/tab3",
40     name: "tab3",
41     meta: {
42       title: "我是tab3列表",
43       keepAlive:true,
44       tabs:['tab1','tab2','tab3']
45     },
46     component: resolve => require(["@/views/test/tab3"], resolve)
47 },
48 {
49     path: "/content",
50     name: "content",
51     meta: {
52       title: "我是列表详情",
53       keepAlive:true
54     },
55     component: resolve => require(["@/views/test/content"], resolve)
56 }
57]
第二步:打开 APP.vue 页面  注意:这里的 cachePageName  一定是组件name,不是路由name(必须每个组件都加上name,组件name必须写成和路由name一样)

    html代码:
1<keep-alive :include="cachePageName">
2  <router-view v-if="$route.meta.keepAlive"></router-view>
3</keep-alive>
4<router-view v-if="!$route.meta.keepAlive"></router-view>
    js代码:
01export default {
02name: "App",
03data() {
04    return {
05 
06 
07    }
08},
09computed:{
10    cachePageName(){
11        return this.$store.state.cachePageName;
12    }
13},
14created(){
15//监听页面刷新
16            window.addEventListener('beforeunload',function(){
17             //监听刷新默认缓存当前组件
18                that.$store.commit('resetcachePageName',that.$route.name);
19            })
20}
21}
第三步:这里需要用到vuex,如果没安装的请自行安装vuex,这里不做解释;
01const store = new Vuex.Store({
02state: {
03    cachePageName:'', //缓存组件名称
04  },
05mutations: {
06//重置缓存组件名称
07    resetcachePageName(state, res){
08        state.cachePageName = res;
09    },
10//添加缓存组件名称
11addcachePageName(state, res){
12    if(state.cachePageName == ''){
13        state.cachePageName = res;
14    }else{
15        let arr = state.cachePageName.split(',');
16        if (res && typeof res === 'string') {
17            let i = arr.indexOf(res);
18            if (i <= -1) {
19                state.cachePageName = state.cachePageName+','+res;
20            }
21        }
22    }
23},
24//删除缓存组件名称
25delcachePageName(state, res){
26    let arr = state.cachePageName.split(',');
27    if (res && typeof res === 'string') {
28      let i = arr.indexOf(res);
29      if (i > -1) {
30          arr.splice(i, 1);
31          state.cachePageName = arr.join();
32      }
33    }
34}
35}
36})
第四步:修改路由中 scrollBehavior 滚动行为,在前进 和 后退 中动态删除 和 新增需要缓存的组件
01// 路由配置
02const RouterConfig = {
03mode: "hash", //hash history
04routes: Routers,
05scrollBehavior: function (to, from, savedPosition) {
06// console.log(to) // to:要进入的目标路由对象,到哪里去
07// console.log(from) // from:离开的路由对象,哪里来
08// console.log(savedPosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
09// 从第二页返回首页时savedPosition为undefined
10if (savedPosition || typeof savedPosition === 'undefined') //后退
11{
12 
13 
14  //判断是否是相邻得tab(tab跳转一定要replace跳转),如果是,那么每次打开都是获取最新页面
15  if(typeof from.meta.tabs !== 'undefined' && from.meta.tabs.length > 0)
16  { //是tabs
17 
18 
19    //清空tabs之间切换缓存,tabs直接跳转是不需要缓存的,因为大家都是同级页面
20    from.meta.tabs.map(function(vo,index){
21      store.commit('delcachePageName',vo);
22    })
23 
24 
25  }else{
26   //不是tabs
27 
28 
29    //后退到缓存页面,那么这里需要删除上一个页面的缓存,因为你要是再次打开,肯定要获取最新的页面数据 A-B-C 如果从C返回B肯定要把C的缓存删除,不然你从B-C,那就显示C的缓存了
30    store.commit('delcachePageName',from.name);
31  }
32 
33 
34  //后退滚动到上一次位置
35  if (savedPosition) { return savedPosition }
36 
37 
38} else { //前进
39 
40 
41  //前进把前进的页面加入到要缓存的组件中
42  store.commit('addcachePageName',to.name);
43 
44 
45  //前进滚动到顶部
46  return {x:0,y:0}
47 
48 
49}
50}
51}
第五步:如果还是不明白,可以加我qq:957987132,互相学习交流。
0
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢