[JavaScript知识库]vue-element-admin 三四级路由菜单无法缓存 数据丢失问题 最简单的解决办法

vue-element-admin 开源框架，支持缓存的只能是一、二级路由页面，三级以上网上就无法缓存了；
结果就是在Tab页之间切换的时候，三级路由的页面会丢失数据，因为没有缓存，每次都是重新创建。

看了很多大佬的解决办法文章，尝试了很多，都无法轻松解决，折腾了很久，快要放弃的时候，想到一个笨办法，但是却很简单、很有效！！！

方法核心要点
1、将原本的三级路由页面 定义在一级 或 二级路由位置上； ----保证了缓存
2、将上述目标路由页面设置为隐藏；
3、在三级路由上定义一个页面，点击后，关闭当前页面，并跳转至目标页面（即1定义的页面）；----保证了菜单层级效果

贴一下已经实现的代码，仅供参考

路由文件代码：

import Layout from '@/layout'

const thirdRouter = {
  // 一级路由
  path: '/first',
  component: Layout,
  redirect: '/first/third',
  name: 'FirstPage',
  meta: {
    title: 'FirstPage',
    icon: 'table'
  },
  // 二级路由
  children: [
    {
      path: 'second',
      component: () => import('@/views/xxxx/blank'),//有三级路由时这里是空组件
      name: 'SecondPage',
      meta: { title: 'SecondPage' },
      //三级路由
      children: [
        { // 过渡跳转页
          path: 'jump',
          component: () => import('@/views/xxxx/jumpto'), // 一个跳转页面
          name: 'JumpPage',
          meta: { title: 'ThirdPage' } //保持和目标页面相同标题
        }
      ]
    },
    { // 目标页面，注意：定义在二级路由位置，不是三级路由
      path: 'third',
      component: () => import('@/views/xxxx/third'),
      name: 'ThirdPage',
      meta: { title: 'ThirdPage' },
      hidden: true // 设置在左侧边栏隐藏，不影响右侧实际展示
    }
  ]
}
export default thirdRouter

跳转页代码
jumpto.vue

<template>
  <div title="jumpto">
    <router-view />
  </div>
</template>

<script>
export default {
  // 创建页面时，即调用jump方法
  created() {
    this.jump()
  },
  methods: {
    jump() {
      // 调用全局挂载的方法，关闭当前页
      this.$store.dispatch('tagsView/delView', this.$route)
      // 跳转至目标页面
      this.$router.push({
        name: 'ThirdPage'  //这里也可以使用path指定：path: '/first/third'
      })
    }
  }
}
</script>

二级空白组件
blank.vue

<template>
  <div title="blank">
    <router-view />
  </div>
</template>

这个方法很简单，实现效果就是 左侧边栏显示的是三级菜单，点击三级菜单（jumpto）后，跳转至目标页面（third），且缓存正常，因为目标页面本来就是1/2级的路由页面。

这是一个曲线救国的方法，但是简单、有效。适合前端新手，大佬可跳过。

注意：如果上述设置后还是出现没有缓存的，需要检查：路由配置中的 name参数 和 对应vue页面文件中的name参数是否一致？

路由中的：

vue页面文件中的：