keep-alive不能缓存多层级路由(vue-router)菜单问题解决

需求

如图需要缓存“风控报告”及“风控规则查询”页面，并且每次删除后才能重新加载（如图二）

"风控管理"是一个blank.vue文件（所有嵌套路由其父都是一个仅放<router-view />的空白文件——占位让其子视图渲染而已），代码如下

<template>
    <router-view />
</template>
<script>
export default {
  name: 'Blank'
}
</script>

解决

看了很多文档，都是把嵌套多级路由拍平（keep-alive满足二级/一级菜单缓存）

1. 需要把所有页签存在vuex中，可以参考vue-element-admin项目中store有个tagsView.js文件
2. 在AppMin.vue文件中，如图加上这两句
   
3. 在全局路由守卫中加上这段代码：（仅仅只是满足三级菜单缓存）
   

if (to.matched && to.matched.length > 2) {
   for (let i = 0; i < to.matched.length; i++) {
     const element = to.matched[i]
     if (element.components.default.name === 'Blank') {
       to.matched.splice(i, 1)
     }
   }
 }

相关文章

axios二次封装，接口统一存放,满足RESTful风格

---

基于elementUI中table组件二次封装（Vue项目）

---

基于ElementUi再次封装基础组件文档