vue 使用keep-alive 三级以上的路由无法缓存解决方案

Vue 三级路由keep-alive缓存问题及解决

最新推荐文章于 2025-09-29 17:39:07 发布

原创最新推荐文章于 2025-09-29 17:39:07 发布 · 4.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在Vue应用中，当使用keep-alive进行页面缓存时，遇到三级及以上路由无法缓存的问题。文章指出，include和exclude属性用于指定哪些组件需要缓存，但三级路由的根页面名称未加入缓存列表导致问题。解决方案是在三级路由的created钩子中，手动将其name添加到state.tagsView.cachedViews，确保刷新或关闭标签页后仍能正确缓存。此外，还提到了如何在tagsView.js中处理刷新时清除缓存的问题。

1、include 包含页面组件name的这些组件页面，会被缓存起来
2、exclude 除了这些name以外的页面组件，会被缓存起来
3、没有include或者exclude属性，表示所有的路由组件都会被缓存起来

<keep-alive>
  <router-view :key="key" />
</keep-alive>

computed: {
 key() {
  return this.$route.path
 }
}

注意
include 或者exclude的name 是页面组件里面具体的name，区分大小写

访问三级路由时，3级根路由的名称不会存入state.tagsView.cachedViews中，所以三级路由页面不会缓存。
解决方案：
在三级路由根页面中的created方法内，将根页面的名称加入到state.tagsView.cachedViews。这样3级路由页面就可以进行缓存了

<script>
export default {
  name: 'Menu1',
  data() {
  return {
      ...
   }
 },
 created() {
   const route = this.$route.matched.find(item => item.name === this.$options.name)
   this.$store.dispatch('tagsView/addCachedView', route)
 }
}
</script>

刷新或者关闭当前标签页，再次打开时，清除不了当前组件的缓存解决方法
找到store下面的tagsView.js文件

addCachedView({ commit }, view) {
   if (view.matched && view.matched.length >= 3) { // 若为三级及其以上路由点击打开标签页时，将三级路由或以上的根目录路由塞入缓存路由name list中
   commit('ADD_CACHED_VIEW', view.matched[1])
  }
   commit('ADD_CACHED_VIEW', view) // 反之，正常的进行标签页的添加进缓存路由name list中
},


delCachedView({ commit, state }, view) {
  return new Promise(resolve => {
    if (view.matched && view.matched.length >= 3) { // 若为三级及其以上路由关闭当前标签页时，将3级路由以上的根目录name 从list中删除
    commit('DEL_CACHED_VIEW', view.matched[1])
  }
   commit('DEL_CACHED_VIEW', view) // 反之，正常的进行标签页的name 从list中删除
   resolve([...state.cachedViews])
  })
},

以上就是相应的解决方案了