vue框架搭建之页面缓存方案

页面缓存

1. 首先定义路由的时候在meta中标记哪些页面需要默认缓存
   
2. 我们使用includes指令来缓存部分页面，需要缓存的数据保存在vuex的store中，方便后面动态操作

vuex的store配置：

// vuex的store配置
export default new Vuex.Store({
  state: {
    // 需要缓存的页面名称集合（注意：includes指令中配置的名称是组件内部name定义的名称，不是路由中配置的name）
    keepAliveComponents: []
  },
  mutations: {
    // 提供两个操作数组的mutation
    addKeepAlive(state, name) {
      let arr = state.keepAliveComponents.map(item => {
        return item;
      });
      arr.push(name);
      state.keepAliveComponents = arr;
    },
    delKeepAlive(state, name) {
      let arr = state.keepAliveComponents.filter(item => {
        return item != name;
      })
      state.keepAliveComponents = arr;
    }
  },
  actions: {
  },
  modules: {
  }
})

app.vue中keep-alive标签

3. 我们在mounted生命周期中判断当前页面是否需要缓存，需要缓存的加入keepAliveComponents数组中（为什么在mounted里，而不是在router.beforeEach里，后面再说明）

下面代码中判断name都是通过获取$route.name判断的，但是includes指令实际要配置的是组件的name属性，所以要保证组件中name的配置和路由中name的配置一致

这里用了全局混入实现

import Vue from 'vue'
import store from '@/store'

Vue.mixin({
  mounted() {
    this.$nextTick(() => {
      if(this.$options.name && this.$route && this.$route.meta.keepAlive && store.state.keepAliveComponents.indexOf(this.$route.name)<0) {
        store.commit('addKeepAlive', this.$route.name)
      }
    })
  }
})

部分场景不需要缓存

通过上面的三步，已经实现在路由中配置部分页面缓存
但是项目当中经常会有这种场景：
“首页（A）” 跳转到 “列表页（B）”，希望 “列表页（B）” 始终被刷新不缓存
但是从 "列表页（B）"跳转到 “详情页（C）”，再从 “详情页（C）” 返回 “列表页（B）” 时，希望 “列表页（B）” 是缓存的

缓存情况

首先，列表页默认缓存只需要在根据第一章的在路由中配置meta:{keepAlive:true}，就可以了

不缓存的情况

然后，要实现从某些页面进入时不缓存，可以在页面路由导航中操作

  beforeRouteEnter(to, from, next) {
    if(from.name == 'About') {
      // 从About页面跳转过来的时候不需要缓存
      store.commit('delKeepAlive', to.name)
    }
    next();
  },

注：这就是为什么上面要在mounted里面加缓存，而不是在router.beforeEach中做，因为页面的beforeRouteEnter是在router.beforeEach之后执行的，这样会导致清缓存后下一次的页面跳转也没有被缓存