keep-alive 实现从列表页到详情页，然后再回到列表页并保持原来列表页的页码数，并且只刷新数据

思路：

keep-alive应用场景介绍 

• <keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。
  结合router,缓存部分页面
• activated 和 deactivate 生命周期钩子

• include string或正则，只有名称匹配的组件会被缓存 2.1.0+

• exclude string或正则, 名称匹配的组件不会被缓存 2.1.0+

• max 最多可以缓存多少组件实例 2.5.0+

例子：

<keep-alive include="a,b" :include="['a','b']" :exclude="/a|b/" :max="10">
  <component :is='view'></component>
</keep-alive>

 

下面开始讲解应用在保留列表当前页的案例中：

结合router,缓存部分页面

1. 布局router-view中

<template>
  <div class="mainContainer-wrap">
    <transition :name="name" mode="out-in" name="fade">
      <keep-alive>
        <router-view v-if="this.$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition :name="name" mode="out-in" name="fade">
      <router-view v-if="!this.$route.meta.keepAlive"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'mainContainer',
  data () {
    return {
      name: this.$route.name
    }
  },
  mounted () {
    // console.log(this.$route.meta.keepAlive)
  }
}
</script>

2.在router/设置route的元信息 meta

{
    path: '/dm',
    component: Layout,
    redirect: '/dm/basic',
    name: '设备中心',
    meta: {
      title: '设备中心',
      icon: ''
    },
    children: [{
      path: 'basic',
      name: 'Basic',
      component: Basic,
      meta: {
        title: '设备管理',
        keepAlive: true // 需要缓存
      }
    }, {
      path: 'basic/decDetail',
      name: 'DeviceDetail',
      component: DeviceDetail,
      meta: {
        title: '设备详情',
        level: 2,
        hidden: true,
        keepAlive: false // 不需要缓存
      }
    }]
  },

使用keep-alive会将数据保留在内存中，如果每次进入页面的时候要获取最新的数据，需要 在 activated 生命周期中 重新获取数据，承担原来created 钩子中获取数据的任务
设置了keep-alive的组件
第一次进入： beforeRouteEnter => created => ... => activated => ... => deactivated
后续进入：beforeRouteEnter => activated => deactivated,
只有第一次进入该组件时，才会走created钩子，需要缓存的组件中activated时每次都会走的钩子函数

3. 列表页钩子函数设置

created () {
    this.getList()
  },
  activated() {
    //只刷新数据，不改变整体的缓存
    this.getList()
  },
  mounted () {
    this.getProductName()
  },
  //修改列表页的meta值，false时再次进入页面会重新请求数据。
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false
    next()
  },

4. 详情页路由的钩子函数设置

// 从详情页返回主页时把主页的keepAlive值设置为true（要做个判断，判断是不是返回到主页的）
  beforeRouteLeave (to, from, next) {
    if (to.name === 'Basic') {
      to.meta.keepAlive = true
    } else {
      to.meta.keepAlive = false
    }
    next()
  },

 

效果如下：