一、需求

产品要求：Vue移动端项目进入列表页，列表页需要刷新，而从详情页返回列表页，列表页则需要缓存并且还原页面滚动条位置

二、实现思路

1、使用Vue中的keep-alive组件，keep-alive提供了路由缓存功能

2、因为我项目只是针对某几个列表页面做缓存，我就直接把指定的几个页面单独的做处理（即：把需要做缓存的页面路由的meta新增了keepAlive属性，当keepAlive为true时缓存，为false则不缓存），从而实现进入列表页，列表页需要刷新，而从详情页返回列表页，列表页则需要保持页面缓存

建议使用keep-alive 的 includes属性来做缓存页面

三、最终效果

四、具体实现

1、app.vue文件修改

<template>
  <div id="app">
    <keep-alive>
      <router-view class="Router" v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view class="Router" v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

2、在动态路由生成后初始化指定缓存页面路由设置meta中keepAlive属性为true

3、单个列表页面的缓存处理（详情返回到列表滚动条的位置）

beforeRouteLeave(to, from, next) {
    // console.log('777---', from)
    this.scroll = document.querySelector('.endInfo').scrollTop
    // 离开页面时，需要清除缓存（为了下次进入后刷新页面）
    from.meta.keepAlive = false
    next()
  },
  activated() {
   // 注意`endInfo`类是：列表box的顶级类，用来计算滚动条的距离
    document.querySelector('.endInfo').scrollTop = this.scroll
    console.log('缓存页面距离', this.scroll)
  },

4、从详情页面返回到列表，需要如下设置（关键步骤）

beforeRouteLeave(to, from, next) {
    console.log('支付单详情页', to)
    // 设置下一个路由的meta,让列表页面缓存,即不刷新（即：此详情页面返回到sell和customerMangement页面后此页面缓存）
    if (to?.path?.includes('sell') || to?.name?.includes('customerMangement')) {
      to.meta.keepAlive = true
    }
    next()
  },

相关文章

基于ElementUi再次封装基础组件文档

---

基于ant-design-vue再次封装基础组件文档

---

vue3+ts基于Element-plus再次封装基础组件文档