vue中三级路由无法缓存问题

1、问题表述：

三级路由设置cache不起作用,该路由页不会被缓存

2、路由结构(json):

{
  path: '/supports',
  component: Layout,
  redirect: '/devices/devices-list',
  meta: {
    title: '一级路由',
    icon: ''
  },
  children: [
    {
      path: 'devices',
      name: 'Devices',
      component: { render: h => h('router-view') },
      redirect: '/devices/devices-list',
      meta: {
        title: '二级路由',
        icon: '',
        cache: true
      },
      children: [
        {
          path: 'devices-list',
          name: 'DevicesList',
          component: () => import('_views/supports/devices/devices-list/devices-list.vue'),
          meta: {
            title: '三级路由1',
            icon: '',
            cache: true
          }
        },
        {
          path: 'devices-type',
          name: 'DevicesType',
          component: () => import('_views/supports/devices/devices-type/devices-type.vue'),
          meta: {
            title: '三级路由2',
            icon: '',
            cache: true
          }
        }
      ]
    },
    {
      path: 'message-list',
      name: 'MessageList',
      component: () => import('_views/supports/message/message-list.vue'),
      meta: {
        title: '消息管理',
        icon: '',
        cache: true
      }
    }
  ]
}

3、 解决办法

• 第一步：先检查配置的路由的name和引入的组建的名字是否一致（如图）
  

  图1_1

• 第二步：在一级路由中新建index.vue文件,再次进行路由渲染，重新添加keep-alive，总之，你在外部怎么渲染的路由可以复制一份过来，但是需要确定当前index.vue组件的name值唯一（如图）
  

  图1_2

• 第三步：重新配置路由，将上面的路由json修改一下，修改内容如

  将所有包含有三极路由的二级路由中的component: { render: h => h('router-view') }修改成新创建的index.vue路径 component: () => import('_views/supports/index.vue'),

  设置三级路由的标识值，可以在meta中设置，也可以不设置，或者自行在相应地地方设置，此一步，是为了在路由进入的时候将三级路由的组件名称push进图二中的cachedViews数组中的同时将index.vue组件名也push进去，下面是我的设置：

{
  path: '/supports',
  component: Layout,
  redirect: '/devices/devices-list',
  meta: {
    title: '一级路由',
    icon: ''
  },
  children: [
    {
      path: 'devices',
      name: 'Devices',
      component: () => import('_views/supports/index.vue'),
      redirect: '/devices/devices-list',
      meta: {
        title: '二级路由',
        icon: '',
        cache: true
      },
      children: [
        {
          path: 'devices-list',
          name: 'DevicesList',
          component: () => import('_views/supports/devices/devices-list/devices-list.vue'),
          meta: {
            title: '三级路由1',
            icon: '',
            name: 'Three',
            cache: true
          }
        },
        {
          path: 'devices-type',
          name: 'DevicesType',
          component: () => import('_views/supports/devices/devices-type/devices-type.vue'),
          meta: {
            title: '三级路由2',
            name: 'Three',
            icon: '',
            cache: true
          }
        }
      ]
    },
    {
      path: 'message-list',
      name: 'MessageList',
      component: () => import('_views/supports/message/message-list.vue'),
      meta: {
        title: '消息管理',
        icon: '',
        cache: true
      }
    }
  ]
}  

第四步：在路由进入的时候将index.vue的组建名和当前进入的页面的组建名都push进index.vue中渲染的cachedViews数组中。

注意： 这里的index.vue是和之前最初渲染路由时候的数组名称及渲染保持一致，所使用的:include的数组是同一个，这里不赘述keep-alive的相关知识和路由拦截等的相关知识

后续

可以配合vue的开发工具进行调试，观察是否缓存更直观些

图1_3

本次问题得以解决取决于一种逆向思维，开始时候单纯的考虑为什么不缓存，围绕这个问题进行寻找解决的方法，查了很多网站也没能找都解决办法，之后考虑从别的方向入手，不能顺着来，就来看看到底是dom结构问题还是路由本身问题还是其他什么问题，结合DevTools进行定位，最终发现问题所在，从而解决了问题