VUE admin-element 后臺管理系統三級菜單實現緩存

框架無法直接實現三級菜單頁面緩存，原因是由于直接緩存時沒有把上級路由文件名稱緩存進去，所以在框架基礎上參考部分文章進行了一些改造

菜單文件，三級菜單引用文件路徑修改，在nested下添加新文件src/views/nested/RouteLevelWrapper/index.vue

<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文件中，增加多層路由緩存

  ADD_CACHED_VIEW: (state, view) => {if (state.cachedViews.includes(view.name)) returnif (!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 文件中

<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數組