vue element admin 三级路由缓存问题的解决办法

三级路由缓存一直是很让人头疼的问题 , 经过多次测试 app-main 里边的router-view 的key去掉,这样所有组件可以共用一个parent-view

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
<!--        <router-view :key="key" />-->
                <router-view />//  不要带上key  
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      // let list = []
      // list = ['ParentView', ...this.$store.state.tagsView.visitedViews ? this.$store.state.tagsView.visitedViews.filter(item => !(item.meta && item.meta.noCache)).map(item => item.name) : []]
      // return list

      // return this.$store.state.tagsView.cachedViews
      return ['ParentView', ...this.$store.state.tagsView.cachedViews]
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.fixed-header+.app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header+.app-main {
    padding-top: 84px;
  }
}
</style>

这是 parent-view.vue

<template>
  <keep-alive :include="cacheList" :exclude="notCacheName">
    <router-view ref="child" />
  </keep-alive>
</template>
<script>
export default {
  name: 'ParentView',
  computed: {
    key() {
      return this.$route.path
    },
    notCacheName() {
      return [(this.$route.meta && this.$route.meta.noCache) ? this.$route.name : '']
    },
    cacheList() {
      console.log(this.$store.state.tagsView.cachedViews)
      /*     let list = []
      list = ['ParentView', ...this.$store.state.tagsView.visitedViews ? this.$store.state.tagsView.visitedViews.filter(item => !(item.meta && item.meta.noCache)).map(item => item.name) : []]
      return list*/
      // return this.$store.state.tagsView.cachedViews

      return ['ParentView', ...this.$store.state.tagsView.cachedViews]
    }
  }
}
</script>

去掉 router-view 的key 之后点开 vue 调试工具看效果

image.png

如果不去掉 key 那么会多开虚拟dom 导致三级路由无法共用一个 parent-view 效果如下

image.png

附上路由表

/** When your routing table is too long, you can split it into small modules **/

import Layout from '@/layout'
import parentview from '_c/parentview'
const nestedRouter = {
  path: '/nested',
  component: Layout,
  redirect: '/nested/menu1/menu1-1',
  name: 'Nested',
  meta: {
    title: 'Nested Routes',
    icon: 'nested'
  },
  children: [
    {
      path: 'menu1',
      component: parentview, // Parent router-view
      name: 'Menu1',
      meta: { title: 'Menu 1' },
      redirect: '/nested/menu1/menu1-1',
      children: [
        {
          path: 'menu1-3',
          component: () => import('@/views/nested/menu1/menu1-3'),
          name: 'Menu1-3',
          meta: { title: 'Menu 1-3' }
        },
        {
          path: 'menu1-1',
          component: () => import('@/views/nested/menu1/menu1-1'),
          name: 'Menu1-1',
          meta: { title: 'Menu 1-1' }
        }

      ]
    },
    {
      path: 'menu2',
      name: 'Menu2',
      component: () => import('@/views/nested/menu2/index'),
      meta: { title: 'Menu 2' }
    },
    {
      path: 'xitongshezhi',
      component: parentview,
      name: 'Xitongshezhi',
      redirect: '/nested/menu1/menu1-2/menu1-2-1',
      meta: { title: '系统设置', cache: true },
      children: [
        {
          path: 'bumenguanli',
          component: () => import('@/views/nested/menu1/xitongshezhi/bumenguanli'),
          name: 'Bumenguanli',
          meta: { title: '部门管理' }
        },
        {
          path: 'jueseguanli',
          component: () => import('@/views/nested/menu1/xitongshezhi/jueseguanli'),
          name: 'Jueseguanli',
          meta: { title: '角色管理' }
        }
      ]
    }
  ]
}

export default nestedRouter

最后编辑于：2020.10.13 16:12:50