vue中<keep-alive>使用

一、缓存组件

<transition name="fade-transform" mode="out-in">
  <keep-alive>
    <router-view v-if="key === '/goods'" />
  </keep-alive>
</transition>
<transition name="fade-transform" mode="out-in">
  <router-view v-if="key !== '/goods'" :key="key" />
</transition>

或 （不带动画）

<keep-alive>
<router-view v-if="key === '/goods'" />
</keep-alive>
<router-view v-if="key !== '/goods'" :key="key" />

或（使用meta: { keepAlive: true }）

<transition name="fade-transform" mode="out-in">
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath" />
  </keep-alive>
</transition>
<transition name="fade-transform" mode="out-in">
  <router-view v-if="!$route.meta.keepAlive" :key="key" />
</transition>

二、缓存后如何获取数据

解决方案可以有以下两种：

beforeRouteEnter
activated

三、被缓存组件如何再次更新

从列表到详情，从详情返回列表，列表不需要更新；
从其他路由跳到列表，需要更新

（1）
router配置    meta: { title: '列表页', keepAlive: true, isBack: false }

（2）
beforeRouteLeave(to, from, next) {
    let routeList = ['listDetail']
    if (routeList.indexOf(to.name) !== -1) {
      from.meta.isBack = true
    }
    next()
 }

 （3）
 activated() {
    if (!this.$route.meta.isBack) {
      this.activeTabIndex = 0
      this.requestObj = {
        page: 1,
        pagesize: 10,
        status: -1
      }
      this.getData()
    }
    this.$route.meta.isBack = false
 }