keep-alive实现缓存组件，并且实现缓存滚动条位置

需求：在列表页浏览后进入详情页，返回后列表页进行缓存，目的是为了用户可以继续回到上次浏览的页码和滚动条位置

vue2 + tdesign for vue2

实现方案：keep-alive

// 假如你的路由是这样配置的
{
        path: 'shopList', //采购清单
        name: 'shopList',
        props: true,
        redirect: '/index/shopList/shopListList',
        component: () => import("@/views/shopList/index.vue"),
        children: [
          {
            path: 'shopListList', //采购清单列表
            name: 'shopListList', 
            component: () => import("@/views/shopList/List/List.vue")
          },
          {
            path: 'shopListDetail:type', //智慧采购详情
            name: 'shopListDetail', component: () => import("@/views/shopList/detail/detail.vue")
          },
        ]
},

// shopList组件中
<template>
	<keep-alive include="shopListList" max="1">
    	<router-view></router-view>
	</keep-alive>
</template>

这样就可以实现缓存列表组件了。

但是缓存滚动条位置要如何实现呢？

可以在用户点击进入某个订单的详情页时将滚动条位置缓存到data中

// 列表组件
<template>
  <div>
    <t-pagination :current="currentPage" @change="handlePageChange" />
    <t-table :data="pagedOrders" :onRowClick="detail_pages" ref="table" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      orders: [],  // 所有订单数据
      currentPage: 1,  // 当前页码
      pageSize: 10,    // 每页显示的订单数
      scroll_position: 0 // 保存滚动条位置
    };
  },
  computed: {
    pagedOrders() {
      // 根据当前页码和每页显示数量，计算要显示的数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.orders.slice(start, end);
    }
  },
  methods: {
    detail_pages(e) {
      // 保存当前表格滚动条位置
      this.saveTableScrollTop()
      // 跳转
    },
      // 保存滚动条的位置
    saveTableScrollTop() {
      // 这里找到滚动条所在的元素
      const cld_ren = this.$refs.table.$el.childNodes[0]
      this.TableScrollTop = cld_ren.scrollTop
    },
  },
  // 可以使用下面两个生命周期函数进行例如：用户在某个订单详情页进行了改变订单状态的操作，这时候返回列表页时就需要更新一下数据
  activated() {
    console.log('订单列表已激活');
    // 恢复滚动条位置
    const cld_ren = this.$refs.table.$el.childNodes[0]
    cld_ren.scrollTop = this.TableScrollTop
    // 更新数据......
  },
  deactivated() {
    console.log('订单列表已销毁');
  }
};
</script>

• 使用 keep-alive 可以保留所有组件的状态，不仅仅是页码，还包括表单数据或其他交互状态。
• 无需额外保存页码状态。