前言

在vue项目开发过程中，肯定会遇到标签栏功能，有标签栏大概率就会遇到一些页面缓存问题。一般路由缓存会用到keep-alive。

keep-alive包裹路由组件

keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。有以下参数：
include - string | RegExp | Array。只有名称匹配的组件会被缓存。
exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存。
max - number | string。最多可以缓存多少组件实例。

<keep-alive :include="cachedViews">
  <router-view :key="key" />
</keep-alive>

computed: {
   cachedViews() {
     return this.$store.state.tagsView.cachedViews
   },
   key() {
     return this.$route.path
   }
 }

二级路由配置

import Layout from '@/layout'

{
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
      }
    ]
  },

配置完之后，在layout下的菜单会进入到缓存里，路由切换时，页面不会重复请求接口；

三级路由配置

{
  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' }
            },
            {
              path: 'menu1-2-2',
              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
              name: 'Menu1-2-2',
              meta: { title: 'Menu 1-2-2' }
            }
          ]
        }
      ]
    }
  ]
}   

当我们配置三级路由配置时，会发现页面重新切到三级路由所在菜单例如menu1-1或者menu1-2-1时，页面会重新请求数据，并没有做到实际意义上的缓存。那我们应该怎么解决这个问题呢？

解决三级路由无法缓存问题

建立一个公共的文件，可以给文件命名为ParentView，设置name为ParentView。
ParentView文件内放入与layout组件路由缓存相同代码

<keep-alive :include="cachedViews">
  <router-view :key="key" />
</keep-alive>

computed: {
   cachedViews() {
     return ['ParentView', ...this.$store.state.tagsView.cachedViews]
   },
   key() {
     return this.$route.path
   }
 }

includes参数中要加入ParentView的name值，自动加入到缓存队列中。
layout中keep-alive的includes参数中也要加入ParentView的name值。

computed: {
   cachedViews() {
     return ['ParentView', ...this.$store.state.tagsView.cachedViews]
   }
 }

在路由配置的时候，引入ParentView文件，所有的二级路由component改为ParentView

import Layout from '@/layout'
import ParentView from '@/components/ParentView'

{
  path: '/nested',
  component: Layout,
  redirect: '/nested/menu1/menu1-1',
  name: 'Nested',
  meta: {
    title: 'Nested Routes',
    icon: 'nested'
  },
  children: [
    {
      path: 'menu1',
      component: ParentView
      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: ParentView,
          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' }
            },
            {
              path: 'menu1-2-2',
              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
              name: 'Menu1-2-2',
              meta: { title: 'Menu 1-2-2' }
            }
          ]
        }
      ]
    }
  ]
}   

这样我们再进入到三级路由菜单时，页面就会将当前页面加入到缓存列表中。
同理，多级菜单的缓存也可像上列步骤一样操作。