VUE admin-element 后台管理系统三级菜单实现缓存

VUE admin-element 后台管理系统三级菜单实现缓存

框架无法直接实现三级菜单页面缓存,原因是由于直接缓存时没有把上级路由文件名称缓存进去,所以在框架基础上参考部分文章进行了一些改造

菜单文件,三级菜单引用文件路径修改,在nested下添加新文件src/views/nested/RouteLevelWrapper/index.vue

bash 复制代码
<template>
  <div class="app-main">
    <keep-alive :include="cachedViews">
      <router-view  />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'RouterViewKeepAlive',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

tagsView.js文件中,增加多层路由缓存

bash 复制代码
  ADD_CACHED_VIEW: (state, view) => {
    if (state.cachedViews.includes(view.name)) return
    if (!view.meta.noCache) {
      //多层嵌套路由缓存问题处理
      if(view.matched.length>2){
        view.matched.forEach(item=>{
          if(item.name){
            state.cachedViews.push(item.name)
          }  
      })
    }else{
      state.cachedViews.push(view.name)
    }
  }
  },
    DEL_CACHED_VIEW: (state, view) => {
         //多层嵌套路由缓存问题处理
      if (view.matched && view.matched.length >= 3) { 
     state.cachedViews = state.cachedViews.filter(item => !view.matched.some(obj => obj.name === item));
      }  
    for (const i of state.cachedViews) {
      //多层嵌套路由缓存问题处理  
      if (i === view.name) {
        const index = state.cachedViews.indexOf(i)
        state.cachedViews.splice(index, 1)
        break
      }
    }
  },

需要缓存的页面名称与菜单配置组件名一致

AppMain 文件中

bash 复制代码
<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

关键是将对应的菜单目录文件名称缓存到cachedViews数组

相关推荐
江城开朗的豌豆42 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
试图让你心动11 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_11 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏12 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
小毛驴85013 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
daixin884815 小时前
什么是缓存雪崩?缓存击穿?缓存穿透?分别如何解决?什么是缓存预热?
java·开发语言·redis·缓存
JSON_L17 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊17 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js