Vue 移动端(H5)项目怎么实现页面缓存(即列表页面进入详情返回后列表页面缓存且还原页面滚动条位置)keep-alive缓存及清除keep-alive缓存

一、需求

产品要求: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、在动态路由生成后初始化指定缓存页面路由设置metakeepAlive属性为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()
  },

五、缺陷:按此方法缓存页面,会出现列表新增数据后进入详情在返回到列表时,之前新增的数据没有(即还是上一次的缓存列表数据)

六、解决方法:在离开列表页面就手动清除keep-alive缓存

1、在app.vue页面加上clearKeepAlive方法(并使用EventBus全局监听)

解释:this.$bus就是在main.js 加上:Vue.prototype.$bus = new Vue()

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

<script>
export default {
  name: 'app',
  computed: {
    fullPath() {
      // console.log(this.$route.fullPath);
      return this.$route.fullPath;
    },
  },
  mounted() {
    console.log('app---mounted')
      // 注册监听全局的clearKeepAlive方法,可在其他组件中触发此方法
      this.$bus.$on("clearKeepAlive", this.clearKeepAlive);
  },
  methods: {
    // 根据fullUrl清除keepAlive
    clearKeepAlive(fullUrl) {
      // console.log('bus触发要清除的keepAlive', fullUrl);
      this.$children.forEach((item) => {
        if (item.$vnode.data.key == fullUrl) {
          // console.log('destorykeepAlive', item.$vnode.data.key, fullUrl, item);
          this.destorykeepAlive(item);
        }
      });
    },
    // 封装清除某个组件的keepAlive状态,并销毁
    destorykeepAlive(keepAliveDom) {
      if (keepAliveDom?.$vnode?.data?.keepAlive) {
        if (keepAliveDom?.$vnode?.parent?.componentInstance?.cache) {
          if (keepAliveDom.$vnode.componentOptions) {
            var key =
              keepAliveDom.$vnode.key == null
                ? keepAliveDom.$vnode.componentOptions.Ctor.cid +
                (keepAliveDom.$vnode.componentOptions.tag
                  ? `::${keepAliveDom.$vnode.componentOptions.tag}`
                  : "")
                : keepAliveDom.$vnode.key;
            var cache =
              keepAliveDom.$vnode.parent.componentInstance.cache;
            var keys = keepAliveDom.$vnode.parent.componentInstance.keys;
            if (cache[key]) {
              if (keys.length) {
                var index = keys.indexOf(key);
                if (index > -1) {
                  keys.splice(index, 1);
                }
              }
              delete cache[key];
            }
          }
        }
      }
      keepAliveDom.$destroy();
    }
}
</script>

2、单个列表页面使用

  beforeRouteLeave(to, from, next) {
    if (to.name !== '列表进入的详情页面name') {
     // 离开列表页面的时候:当不是进入列表详情页面时清除列表页面的缓存
      this.$bus.$emit("clearKeepAlive", from.path)
    }
    next()
  },

相关文章

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


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


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/540243.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《黑马点评》Redis高并发项目实战笔记(上)P1~P43

P1 Redis企业实战课程介绍 P2 短信登录 导入黑马点评项目 首先在数据库连接下新建一个数据库hmdp&#xff0c;然后右键hmdp下的表&#xff0c;选择运行SQL文件&#xff0c;然后指定运行文件hmdp.sql即可&#xff08;建议MySQL的版本在5.7及以上&#xff09;&#xff1a; 下面这…

冲刺2024年思维100春季线上比赛:做做历年思维100真题(附答案)

今天是2024年4月13日&#xff0c;距离2024年春季思维100活动第一阶段的线上比赛4月20日还有7天。今年思维100活动的考试重点是什么呢&#xff1f;虽然主办方未公布&#xff0c;我们可以从历年的思维100真题中来分析和推测&#xff0c;把历年真题和背后的知识点吃透了&#xff0…

宠物领养|基于springboot的宠物领养系统设计与实现(附项目源码+论文)

基于springboot的宠物领养系统设计与实现 目录 一、摘要 二、相关技术 三、系统设计 3.1 整体功能设计图 3.2 功能具体细节设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 如今社会上各行各业&#xff0c;都在用属于自己专用的软件来进行…

记录一下如何腾讯云服务器用客户端连MySQL

我一般喜欢用IDEA连数据库&#xff0c;别问我为啥&#xff08;就喜欢用一个软件解决所有问题&#xff09; 当然写SQL语句个人还是觉得sqlyog体验最佳&#xff01;

llama-factory SFT系列教程 (二),大模型在自定义数据集 lora 训练与部署

文章目录 简介支持的模型列表2. 添加自定义数据集3. lora 微调4. 大模型 lora 权重&#xff0c;部署问题 参考资料 简介 llama-factory SFT系列教程 (一)&#xff0c;大模型 API 部署与使用本文为 llama-factory SFT系列教程的第二篇&#xff1b; 支持的模型列表 模型名模型…

服务器配置环境步骤

1、创建虚拟环境 conda create --name 名字 pythonpython版本号2、进入虚拟环境 conda activate 名字3、确认自己要安装的torch版本和torchvision版本&#xff0c;进入https://pytorch.org/get-started/previous-versions/ 复制相应的命令&#xff0c;运行即可 注&#xff1a…

Visual Studio Code SSH 连接远程服务器

Visual Studio Code通过 SSH 连接远程服务器并实现免密登录&#xff0c;你可以按照以下步骤进行操作&#xff1a; 1. **安装插件**&#xff1a;首先&#xff0c;在 VS Code 中安装 "Remote - SSH" 插件。打开 VS Code&#xff0c;点击左侧的扩展图标&#xff0c;搜索…

C++如何排查并发编程死锁问题?

C如何排查并发编程死锁问题&#xff1f; 最近在Apache arrow里面写一个支持并行的算子&#xff1a;nested loop join&#xff0c;然后既然涉及到并行&#xff0c;这里就会遇到大家常说的死锁问题&#xff0c;假设你碰到了死锁问题&#xff0c;如何调试与定位呢&#xff1f; 那这…

最小均方(LMS)自适应滤波算法

1 LMS函数实现 % ----------------------------LMS(Least Mean Squre)算法------------------------------ % % parm: % xn 输入的信号序列 (列向量) % dn 所期望的响应序列 (列向量) % M 滤波器的阶数 (标量) % mu 收敛因子(步长) …

统信UOS(Linux)安装nvm node管理工具

整篇看完再操作&#xff0c;有坑&#xff01;&#xff01; 官网 nvm官网 按照官网方式安装&#xff0c;一直报 错 经过不断研究&#xff0c;正确步骤如下 1、下载安装包 可能因为网络安全不能访问github&#xff0c;我是链接热点下载的 wget https://github.com/nvm-sh/…

Java Maven项目推送到 Maven 中央仓库

准备阶段 namespace 域名认证 当需要在 sonatype 认证 com.xxx命名空间时&#xff0c;需要将 .xxx.com 配置域名解析。 记录类型&#xff1a;TXT 文本内容&#xff1a;验证的 key。 GPG 公私钥生成 GPG 下载地址&#xff1a;https://www.gnupg.org/download/index.html M…

RestTemplate—微服务远程调用—案例解析

简介&#xff1a;总结来说&#xff0c;微服务之间的调用方式有多种&#xff0c;选择哪种方式取决于具体的业务需求、技术栈和架构设计。RESTful API和HTTP客户端是常见的选择&#xff0c;而Feign和Ribbon等辅助库可以简化调用过程。RPC和消息队列适用于特定的场景&#xff0c;如…

单片机方案 发声毛绒小黄鸭

随着科技的不断进步&#xff0c;智能早教已经成为了新时代儿童教育的趋势。智能早教玩具&#xff0c;一款集互动陪伴、启蒙教育、情感培养于一身的高科技产品。它不仅能陪伴孩子成长&#xff0c;还能在游戏中启迪智慧&#xff0c;是家长和孩子的理想选择。 酷得电子方案开发特…

OV通配符证书:安全、便捷的网络认证新选择

OV通配符证书&#xff0c;即组织验证型通配符证书&#xff0c;其最大特点在于其通配符功能。这意味着&#xff0c;一个OV通配符证书可以覆盖同一主域名下的多个子域名&#xff0c;大大简化了证书管理和维护的复杂性。无论是大型企业还是个人网站&#xff0c;都可以通过OV通配符…

[面向对象] 单例模式与工厂模式

单例模式 是一种创建模式&#xff0c;保证一个类只有一个实例&#xff0c;且提供访问实例的全局节点。 工厂模式 面向对象其中的三大原则&#xff1a; 单一职责&#xff1a;一个类只有一个职责&#xff08;Game类负责什么时候创建英雄机&#xff0c;而不需要知道创建英雄机要…

多因子模型的数据处理

优质博文&#xff1a;IT-BLOG-CN 数据处理的基本目的是从多量的、可能是杂乱无章的、难以理解的数据中抽取并推导出有价值、有意义的数据。特别是金融数据&#xff0c;存在数据缺失&#xff0c;不完整以及极端异常值等问题&#xff0c;对于我们的分析和建模影响很多。 对于我…

Git分布式版本控制系统——Git常用命令(二)

五、Git常用命令————分支操作 同一个仓库可以有多个分支&#xff0c;各个分支相互独立&#xff0c;互不干扰 分支的相关命令&#xff0c;具体如下&#xff1a; git branch 查看分支 git branch [name] 创建分支&#x…

20240409在全志H3平台的Nano Pi NEO CORE开发板上运行Ubuntu Core16.04时跑通4G模块EC200A-CN【PPP模式】

20240409在全志H3平台的Nano Pi NEO CORE开发板上运行Ubuntu Core16.04时跑通4G模块EC200A-CN【PPP模式】 2024/4/9 14:25 【不建议使用ppp模式&#xff0c;功耗大&#xff0c;貌似更过分的&#xff01;网速还低&#xff01;】 【唯一的优点&#xff1a;ppp模式下是通过脚本配置…

降额的秘密——不要挑战datasheet!

原文来自微信公众号&#xff1a;工程师看海&#xff0c;与我联系&#xff1a;chunhou0820 看海原创视频教程&#xff1a;《运放秘籍》 大家好&#xff0c;我是工程师看海。 什么是降额设计&#xff1f;我们为什么要降额&#xff1f; 额指的是额定工作状态&#xff0c;降额就是…

CSS特效---HTML+CSS实现3D旋转卡片

1、演示 2、一切尽在代码中 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title&…