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

 1 {
 2     path: '/dm',
 3     component: Layout,
 4     redirect: '/dm/basic',
 5     name: '设备中心',
 6     meta: {
 7       title: '设备中心',
 8       icon: '&#xe605;'
 9     },
10     children: [{
11       path: 'basic',
12       name: 'Basic',
13       component: Basic,
14       meta: {
15         title: '设备管理',
16         keepAlive: true // 需要缓存
17       }
18     }, {
19       path: 'basic/decDetail',
20       name: 'DeviceDetail',
21       component: DeviceDetail,
22       meta: {
23         title: '设备详情',
24         level: 2,
25         hidden: true,
26         keepAlive: false // 不需要缓存
27       }
28     }]
29   },

使用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()
  },

效果如下：

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

猜你喜欢