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

// 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>

// 拿到数据先循环第一层将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
}

// 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>

// 引入组件
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
}

cachedViews: ['MenuMain']