vue中keep-alive组件实现多级嵌套路由的缓存

目录

• 现状(问题):
• 探索方案：
• 实现方式

现状(问题):

keep-alive 组件对第三级及以上级的路由页面缓存失效

探索方案：

方案1、直接将路由扁平化配置，都放在一级或二级路由中
方案2、再一层缓存组件用来过渡，并将其name配置到include中

实现方式

方案1不需要例子，按规则配置路由就行重点介绍方案2
因为我用了vue-element-admin做了架构，并且项目中我将菜单和路由全部通过服务端返回做了统一配置，所以我只能用方案2来实现。

直接看原有代码（问题代码）

// src/layout/component/AppMain.vue
<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>

我从后端那到数据后，根据树形结构做了处理（在store里写的，只展示出关键代码）

// 拿到数据先循环第一层将Layout付给组件
 generateRoutes({ commit }, routeList) {
    return new Promise(resolve => {
      routeList.forEach(items => {
        items.component = Layout
        // 如果有子菜单直接再循环赋值
        items.children = changeAsyncRoutes(items.children)
      })
      commit('SET_ROUTES', routeList)
      resolve(routeList)
    })
  }
function changeAsyncRoutes(routes) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (tmp.children && tmp.children.length !== 0) {
       // 若有子级 先创建router-view容器，再去递归（重点重点重点）
      tmp.component = {
           render: c => c('router-view')
      }
      tmp.children = changeAsyncRoutes(tmp.children)
    } else {
    // 没有子级菜单直接将component字符串解析成组件对象
      tmp.component = importMethod(tmp.component)
    }
    res.push(tmp)
  })
  return res
}

这种写法已经很完美了，可惜，我遇到了三级菜单不能缓存的问题
直接上解决问题的代码

1、新建MenuMain.vue组件如下

// src/layout/component/MenuMain.vue
// 提供多级菜单的容器
<template>
  <keep-alive :include="cachedViews">
    <router-view :key="key" />
  </keep-alive>
</template>

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

2、将此容器取代处理数据时render的 router-view 容器

// 引入组件
import MenuMain from '@/layout/components/MenuMain'

function changeAsyncRoutes(routes) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }

    if (tmp.children && tmp.children.length !== 0) {
    // 注意看着里
      tmp.component = MenuMain
      // {
      //   render: c => c('router-view')
      // }
      tmp.children = changeAsyncRoutes(tmp.children)
    } else {
      tmp.component = importMethod(tmp.component)
    }
    res.push(tmp)
  })
  return res
}

3、把store中的 cachedViews 数组中始终保存MenuMain组件的名称

cachedViews: ['MenuMain']

到此这篇关于vue中keep-alive组件实现多级嵌套路由的缓存的文章就介绍到这了,更多相关vue keep-alive多级嵌套路由缓存内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！