vue 中后台三级及以上路由嵌套，路由缓存(keep-live)不生效的问题

亲测可用，若有疑问请私信

以vue中后台案例页面文件是这样的（路由里面的名称和vue页面中的名称要一致，且必须都要写）

• nested
  • menu1
    • menu1-1
    • menu1-2
      • menu1-2-1

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

1. 在三级路由根页面中的created方法内，将根页面的名称加入到state.tagsView.cachedViews。这样3级路由页面就可以进行缓存了

都加这句话

created() {
 const route = this.$route.matched.find(item => item.name === this.$options.name)
this.$store.dispatch('tagsView/addCachedView', route)

},

比如三级路由的menu1-1页面

<template>
<div class="checked">
  全选
  <el-checkbox v-model="checked"></el-checkbox>
</div>
</template>

<script>
export default {
name: "Menu1-1",
data() {
  return {
    checked: false,
  };
},
created() {
  const route = this.$route.matched.find(item => item.name === this.$options.name)
 this.$store.dispatch('tagsView/addCachedView', route)

},
};
</script>
<style scoped lang="scss">
.checked {
margin: 50px;
}
</style>

2 .比如四级路由的menu1-2-1页面

<template>
  <div class="checked">
     全选<el-checkbox  v-model="checked"></el-checkbox>
  </div>
</template>

<script>
export default {
   name:'Menu1-2-1',
  components: {

  },
  props: {
    
  },
  data() {
      return {
        checked:false,
      };
  },
  computed: {

  },
  watch: {

  },
 created() {
  const route = this.$route.matched.find(item => item.name === this.$options.name)
 this.$store.dispatch('tagsView/addCachedView', route)
},
  mounted() {

  },
  methods: {

  },
};
</script>

<style scoped lang="scss">
.checked{
margin: 50px;

}
</style>