vue keep-alive 动态控制缓存页面并记录历史位置

一、案例前景说明

（1）管理中心进入订单列表页（不需要缓存）
（2）订单详情页进入订单列表页（需要缓存）
1、从管理中心进入订单列表页要请求数据（并更新数据），并不需要做缓存。
2、从订单列表页，特定位置，进入到订单详情页，然后从订单详情返回到订单列表页，是要在特定位置即历史位置，所以要做到缓存处理。

二、如何缓存页面，并记录历史位置

(1)先给缓存页面特定的名字（唯一）

<script>
export default {
  name: 'Orderlist',
}
</script>

给要缓存的页面加一个唯一的名字：”Home“

（2）在router-view外层加缓存

<keep-alive :include="['Orderlistt','management','Home','presell-cart','categorylist','special','seckill']">
    <router-view class="viewer"  :key="$route.fullPath" />
</keep-alive>

步骤1和2就已经缓存了一个页面了，那么下面就是如何记录历史位置

（3）记录缓存页面的历史位置

先给可以滚动的页面盒子结构加ref标识

<cc-main style="background-color:#F2F2F2;position: relative;" ref="main">
  <cc-main>

activated () {
    if (sessionStorage.getItem('scrollOrderlistt') && this.$refs.main) {
      this.$refs.main.$el.scrollTop = sessionStorage.getItem('scrollHome')
    }
 },
 deactivated () {
    sessionStorage.setItem('scrollOrderlistt', this.$refs.main.$el.scrollTop)
}

activated 和deactivated 这两个生命周期都是配合keep-alive使用的，之前的文章”vue的生命周期“有详说
在离开缓存页面时，在deactivated 生命周期中，通过sessionStorage存放页面滚动的scrollTop值
当第二次进入这个页面时，sessionStorage就已经存在了值，所以给”可以滚动的页面盒子结构“的scrollTop赋值

三、通过监听路由动态控制缓存的页面

假设：订单列表页路由是：/orderlist ，组件name是：Orderlist
订单详情页路由是：/orderdetail，组件name是：Orderdetail
管理中心路由是：/management
在路由外层加keep-alive页面，监听路由，根据路由的变化，缓存页面

<template>
  <keep-alive :include="includePaths">
    <router-view></router-view>
  </keep-alive>
</template>
<script>
export default {
  data () {
    return {
      includePaths: ['Orderlist', 'Home']
    }
  },
  watch: {
    $route: {
      deep: true,
      immediate: true,
      handler (to, from) {
         if (to.path.includes('/orderlist')) {
            if (from.path.includes('/orderdetail')) {
              this.includePaths = ['Home']
            } else {
              this.includePaths = ['Orderlist', 'Home']
            }
         }
      }
    }
  }
}
</script>

最后编辑于：2020.09.01 14:39:17