iview-admin不同路由使用keep-alive分别缓存

1 问题描述

自从使用iview-admin这个框架以来,长久有一个问题始终困扰着我,就是每次载入新路由(vue-router)时,总是会重新读取请求数据,这就引出了两个很严重的问题:

1. 请求重复,响应速度慢(前者一般是后者的原因);
2. 每次切换路由时,组件中的data都会重置(这在逻辑上很要命,譬如开销售开单时,需要选择批次,这时你需要到进销存页面查询实际各仓库各批次的数据,查询后再返回时,会很郁闷的发现之前填写的数据都没了,等你再重写填写单据到批次选择那里时,很可能批次数据又忘了,本来应该提供方便的系统,反而造成了不便);

如何使组件内的data形成缓存保留下来,在开发这两三个月以来,始终是悬挂在我心头上的一个大问题.在各种搜索问题的结果中,最接近的答案似乎就是使用keep-alive,但实际使用并不顺利,中间遇到了各种各样的问题(这些问题,我会在第3点中加以说明),但总算得到了比较满意的结果.

---

2 解决方案

实际的解决方案,只有核心的两点:

1. 修改iview-admin中的App.vue,代码如下(这里只列举相关代码):

<template>
  <div id="app">
    <keep-alive>
      <router-view :key="getRouteKey" v-if="$route.meta.keepAlive" ></router-view>
    </keep-alive>
    <router-view :key="getRouteKey" v-if="!$route.meta.keepAlive" >
      <!-- 这里是不被缓存的视图组件，比如 Edit！ -->