Gitcx框架文档

页面缓存

首先需要清楚，本框架不管路由配置多少嵌套层级，最终都会被处理成两级结构，这也是经过许多开发者实践后相对认可的方案。其原因只是因为三级及以上路由在处理页面缓存上，无法提供一个万全的方案，总有各式各样的小问题。

如果想了解框架是怎么处理的，可以看下作者的这篇《一劳永逸，解决基于 keep-alive 的多级路由缓存问题》文章。

那么在两级路由下，我们要如何实现页面缓存，请继续往下看。

注意

开启缓存必须保证每个页面组件必须设置 name ，并且确保 name 唯一。

# 标签栏关闭

首先需要在框架配置里设置（基础版无需设置）。

enableTabbar: false

接下来我们只需要在需要进行缓存的路由 meta 对象里配置 cache 参数即可。这个参数可接受以下 3 种类型：

• boolean

• string

• array

boolean 很好理解，当设置为 true 时，该页面只要一被访问，就会被缓存，这也是大部分同类框架的方案。例如有一个新闻管理的模块，我们把新闻列表页设置为 cache: true 后并访问，然后从新闻列表页点击某条记录进入新闻详情页，这时候再从新闻详情页返回新闻列表页时，新闻列表页上的数据是不会重新加载，而是保留了当时离开时的状态。

但这个方案也有一个弊端，就是该页面一旦访问就永久被缓存住了（除非手动刷新或点击框架提供的刷新按钮），如果用户从新闻列表页进入的不是新闻详情页，而是其它模块的页面，这时候其实是不希望新闻列表页被缓存的。这种情况下，框架支持设置 string 和 array 两个类型的参数值。

首先不管设置 string 还是 array ，你需要设置的值，都是路由的 name 。

怎么理解呢？还是用上面的例子，如果有两个模块，一个新闻管理，一个用户管理。当从新闻列表页进入新闻详情页的时候，需要对新闻列表页进行缓存，而从新闻列表页进入用户列表页，则不需要对新闻列表页进行缓存，我们就可以对新闻列表页的路由设置成：

{
    path: '/news',
    children: [
        {
            path: 'list',
            name: 'NewsList'
            meta: {
                title: '新闻列表',
                cache: 'NewsDetail'
            }
        },
        {
            path: 'detail/:id',
            name: 'NewsDetail',
            meta: {
                title: '新闻详情',
                sidebar: false,
                activeMenu: '/news/list'
            }
        }
    ]
}

这表示从新闻列表页进入新闻详情页时，新闻列表页才会被缓存，进入其它任何页面都不会缓存。

当然也可将 cache 设置成 name 数组。

{
    path: '/news',
    children: [
        {
            path: 'list',
            name: 'NewsList'
            meta: {
                title: '新闻列表',
                cache: ['NewsDetail', 'NewsCreate']
            }
        },
        {
            path: 'detail/:id',
            name: 'NewsDetail',
            meta: {
                title: '新闻详情',
                sidebar: false,
                activeMenu: '/news/list'
            }
        },
        {
            path: 'create',
            name: 'NewsCreate',
            meta: {
                title: '新增新闻',
                sidebar: false,
                activeMenu: '/news/list'
            }
        }
    ]
}

这样就表示从新闻列表页进入新闻详情页或新增新闻页时，新闻列表页才会被缓存，进入其它任何页面都不会缓存。

# 标签栏开启

TIP

请确保已阅读《标签栏 - 标签页合并》。

当你了解标签页是否合并这两种展现形式后，我们再接着说如何针对性的做页面缓存。

# 标签页不合并

这种情况下，访问每个路由都会新建一个标签页，这也就意味着，缓存处理可以相对简单粗暴。因为不确定用户会怎样切换标签页，所以可以直接给需要缓存的路由设置 cache: true 即可。

当点击关闭标签页时，缓存会自动删除，当然手动调用关闭当前标签页的方法也会删除缓存。

# 标签页合并

当标签页合并时，我们从新闻列表页进入新增新闻页后，进行了一些数据填写，这时候再点开其它模块的页面，例如用户列表页，此时标签栏里有 2 个标签页，分别是新增新闻和用户列表，这时候从用户列表页切换回新增新闻页，并且想让它保持住离开时的状态，只能设置 cache: true ，因为从新闻列表页跳转到其它任何页面，都需要将它进行缓存住。但这个时候问题来了，如果从新增新闻页返回新闻列表页时，是需要清除缓存的，所以框架提供了另一个参数 noCache ，来看下面的路由配置。

{
    path: '/news',
    children: [
        {
            path: 'list',
            name: 'NewsList'
            meta: {
                title: '新闻列表',
                cache: true
            }
        },
        {
            path: 'detail/:id',
            name: 'NewsDetail',
            meta: {
                title: '新闻详情',
                sidebar: false,
                activeMenu: '/news/list',
                cache: true,
                noCache: 'NewsList'
            }
        },
        {
            path: 'create',
            name: 'NewsCreate',
            meta: {
                title: '新增新闻',
                sidebar: false,
                activeMenu: '/news/list',
                cache: true,
                noCache: 'NewsList'
            }
        }
    ]
}

表示从新闻详情页或新增新闻页进入新闻列表页时，会删除页面缓存，否则页面始终开启缓存。

这也说明 noCache 这个参数必须在 cache: true 时才会起作用。

# 一劳永逸，解决基于 keep-alive 的多级路由缓存问题

用过 vue-element-admin 的同学一定很清楚，路由的配置直接关系侧边栏导航菜单的展示，也得益于这种设计思路，几乎大部分后台框架都采用这个方案，当然也包括了我写的 Fantastic-admin 这个中后台框架。

但这个方案有个明显的问题，就是为了实现多级侧边栏导航菜单，则需要将路由配置成多级嵌套的形式，一旦超过两级，达到三级甚至更多级，就需要增加一个空布局页面（Empty.vue）用来给 component 使用，仅仅是为了生成层级菜单。此时就出现了一个问题，因为 keep-alive 是在 Layout 上处理的，所以超过两级以上的路由都会变得难以处理，也没有一个相对完美的解决方案。

在思考并解决这个问题之前，我们先来看下页面大致结构：

+------------------------------+
| Layout                       |
|  +------------------------+  |
|  | Empty                  |  |
|  |  +------------------+  |  |
|  |  | Page             |  |  |
|  |  +------------------+  |  |
|  +------------------------+  |
+------------------------------+

首先 keep-alive 是在 Layout 上进行处理，如果不缓存 Empty ，则 Empty 下面的页面将无法被缓存，如果缓存 Empty ，又会导致 Empty 里面的所有页面都被缓存，无法按需清除，相信接触过的同学肯定感同身受其中的大坑。 imge

解决思路

其实有一个相对清晰简单的解决思路，既然缓存二级路由是没问题，而超过二级的中间层级页面也是没太大意义的，那为什么不将路由直接处理成二级，这样页面显示也就是二级的结构。

+------------------------------+                +------------------------------+
| Layout                       |                | Layout.vue                   |
|  +------------------------+  |                |  +------------------------+  |
|  | Empty                  |  |  +---------->  |  | Page                   |  |
|  |  +------------------+  |  |                |  |                        |  |
|  |  | Page             |  |  |                |  |                        |  |
|  |  +------------------+  |  |                |  |                        |  |
|  +------------------------+  |                |  +------------------------+  |
+------------------------------+                +------------------------------+

这里需要注意，路由配置还是保持多级嵌套的形式，而这个配置并非最终注册使用的路由，仅仅是提供侧边栏导航菜单使用，同时再生成一份用于动态注册路由的数据，图例如果没看明白的话，可以看下面两组数据。

// 原始数据（用于侧边栏导航菜单）
{
    path: '/users',
    meta: {
        title: '用户管理'
    },
    children: [
        {
            path: 'clients',
            meta: {
                title: '客户管理'
            },
            children: [
                {
                    path: 'list',
                    meta: {
                        title: '客户列表'
                    }
                },
                {
                    path: 'detail',
                    meta: {
                        title: '客户详情'
                    }
                }
            ]
        }
    ]
}

// 处理后数据（用于动态注册路由）
{
    path: '/users',
    meta: {
        title: '用户管理'
    },
    children: [
        {
            path: 'clients/list',
            meta: {
                title: '客户列表'
            }
        },
        {
            path: 'clients/detail',
            meta: {
                title: '客户详情'
            }
        }
    ]
}

这样一来，通过 $route.meta.breadcrumb 就可以获取任意某个路由的完整面包屑导航信息了。最终效果如下：

imge

通过图片可以看到，这种方案也还是有一定的限制，就是路由被处理成二级后，多级嵌套关系不存在了，也就是不能在 Empty 里写任何代码，因为都会被忽略掉，只保留顶级和最深层的底级两个路由。

当然通过实际情况考虑，这种限制并没有大问题，因为在后台系统里，本身模块相对独立，即便侧边栏导航菜单是嵌套层级关系的，在右侧内容展示区域，几乎都是独立模块展示，无需嵌套。

国际化