keep-alive 解决缓存问题，可用到实际项目

项目场景：

提示：这里简述项目相关背景：
列表页筛选之后点进详情页再返回列表页筛选的依旧是之前的数据

---

问题描述

提示：这里描述项目中遇到的问题：
在列表页选择勾选某项数据之后点击查询然后点击查看某一个选项的详情页，浏览器回退之后之前勾选的内容失效

---

原因分析：

在列表页进入到详情页之后没有将当前列表页进行缓存，所以进入详情页之后再返回页面刷新，勾选内容自然就失效了

---

解决方案：

1：在vuex的state中定义需要需要缓存的页面cachedViews

const state = {
  //缓存的页面
  cachedViews:[],
 
}
在mutations 中定义方法 将需要缓存的页面添加到cachedViews这个数组中去
const mutations = {
    //将需要缓存的页面添加到数组中
  ADD_CACHED_VIEW: (state, view) => {
    if (state.cachedViews.includes(view.name)) return
    if (!view.meta.noCache) {
      state.cachedViews.push(view.name)
    }
  },
  //清除缓存
   DEL_CACHED_VIEW: (state, view) => {
       const index = state.cachedViews.indexOf(view.name)
       index > -1 && state.cachedViews.splice(index, 1)
  },
  }
在actions 中将mutations中定义的方法分发出去
const actions = {
    //添加缓存
    addCachedView({commit}, view) {
      commit('ADD_CACHED_VIEW', view)
    },
    //清除缓存
     delCachedView({commit}, view) {
      commit('DEL_CACHED_VIEW', view)
  },
  }  

2：在main组件中添加keep-alive include去绑定你需要缓存的页面

<keep-alive :include="cachedViews">
        <router-view :key="key" />
</keep-alive>
export default {
  name: "AppMain",
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews;
     
    },
    key() {
      return this.$route.path;
    },

  },
};

3：想好逻辑：只要进入到列表页就先把列表页缓存下来，要是从列表页离开去到的是详情页就把当前列表页缓存下来，但是如果是从列表页去到其他的页面，就应该清除缓存的，要不然无论去哪个页面列表页都会缓存，这与需求不符合

beforeRouteEnter(to, from, next) {
    store.dispatch("tagsView/addCachedView", to);
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 只要去的不是详情页，就清空当前页的缓存
    if (to.name != "detail") {
      store.dispatch("tagsView/delCachedView", from);
    }
    next();
  },

在router里面定义的name，在你需要缓存的页面不要忘记给它暴露出去

export default {
  name:"list",
  }

后续更新三级路由的缓存问题