当前位置： 首页 > news >正文

Vue进阶（六十七）页面刷新路由传参丢失问题分析及解决

news 2026/2/8 9:40:25

文章目录

    • 一、前言
    • 二、问题排查
    • 三、延伸阅读
      • 3.1 Apache服务器access_log日志
      • 3.2 浏览器的常见User Agent 各字段的解释

一、前言

问题描述：Vue项目上线后，在IE浏览器上，从A页面跳转至B页面，B页面通过data中接收来自A页面的参数信息，并在created页面生命周期调用服务接口serviceB.1，返回数据后进行B页面数据渲染展示。B页面刷新后，serviceB.1接口入参丢失且未做入参非空校验，导致serviceB.1全表查询，导致内存溢出。

二、问题排查

通过查看Apache应用服务器access_log日志，发现用户在当前页面做了刷新操作。

通过查看代码得知路由传参获取在data中通过this.$route.query.param方式实现。在mounted钩子函数中进行方法调用。

初步怀疑data中获取的参数在页面刷新时由于异步获取导致，在mouted钩子函数执行时还未获取到路由传参。

解决方法是通过设置延时解决，但是延时大小取值不好精准衡量。可在钩子函数方法执行前获取路由传参。

三、延伸阅读

3.1 Apache服务器access_log日志

在这里插入图片描述

Apache的access.log文件在每次有用户访问时都会被记录。这可以是用户浏览网站、下载文件、提交表单或进行其他类型的请求。每条记录都会包含该请求的详细信息，包括：

  • IP地址：请求的客户端IP地址。
  • 时间戳：请求发生的时间。
  • 请求方法：请求使用的HTTP方法（例如GET或POST）。
  • 请求的资源：客户端请求的URL。
  • 状态码：服务器响应的HTTP状态码（例如200或404）。
  • 数据量：服务器响应的数据量。
  • 引用页面：如果存在，该请求的来源页面。
  • User-Agent：客户端使用的浏览器的信息。

可以通过以下步骤来调整Apache的配置，来决定记录的信息种类和细节。

  1. 打开Apache的配置文件：可以使用文本编辑器打开Apache的配置文件，通常位于/etc/httpd/conf/httpd.conf。

  2. 查找LogFormat指令：该指令定义了您希望在access.log中记录的信息。

  3. 调整格式字符串：在LogFormat指令中，可以调整格式字符串以指定希望记录的信息。可以参考Apache文档，了解可用的格式字符串字符。

  4. 保存更改：保存更改并退出文本编辑器。

  5. 重新启动Apache：使用以下命令重新启动Apache以使更改生效：

    shell sudo service httpd restart

3.2 浏览器的常见User Agent 各字段的解释

User Agent是指浏览器在向服务器发送请求时，会在请求头中添加的一段字符串，用于标识浏览器的类型、版本、操作系统等信息。常见的User Agent包括以下字段：

  1. Mozilla/5.0：表示浏览器使用的是Mozilla浏览器引擎，版本号为5.0。

  2. (Windows NT 10.0; Win64; x64)：表示操作系统为Windows 10，使用的是64位架构。

  3. AppleWebKit/537.36：表示浏览器使用的是Webkit引擎，版本号为537.36。

  4. (KHTML, like Gecko)：表示浏览器使用的是KHTML渲染引擎，类似于Gecko。

  5. Chrome/91.0.4472.124：表示浏览器为Chrome，版本号为91.0.4472.124。

  6. Safari/537.36：表示浏览器为Safari，版本号为537.36。

  7. Edge/91.0.864.59：表示浏览器为Edge，版本号为91.0.864.59。

  8. Mozilla/4.0：表示浏览器使用的是Mozilla浏览器引擎，版本号为4.0。

  9. (compatible; MSIE 7.0; Windows NT 6.0)：表示浏览器为IE7，操作系统为Windows Vista。

  10. (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko：表示浏览器为IE11，操作系统为Windows 7，使用的是Trident引擎。

  • Mozilla/5.0： 网景公司浏览器的标识，由于互联网初期浏览器市场主要被网景公司占领，很多服务器被设置成仅响应含有标志为Mozilla的浏览器的请求，因此，新款的浏览器为了打入市场，不得不加上这个字段。

  • Windows NT 6.3 : Windows 8.1的标识符；

  • WOW64： 32位的Windows系统运行在64位的处理器上；

  • AppleWebKit/537.36：苹果公司开发的呈现引擎；

  • KHTML：是Linux平台中Konqueror浏览器的呈现引擎KHTML；

  • Geckeo：呈现引擎；

  • like Gecko：表示其行为与Gecko浏览器引擎类似；

例如User-Agent 信息如下：

User-Agent: Mozilla/5.0(Windows NT10.0; WOW64; Trident/7.0; rv:11.0) like Gecko

上述代理信息可以解析为：应用系统运行在Win10， IE11浏览器上，使用的Trident引擎。

相关文章：

Vue进阶（六十七）页面刷新路由传参丢失问题分析及解决

文章目录 一、前言二、问题排查三、延伸阅读3.1 Apache服务器access_log日志3.2 浏览器的常见User Agent 各字段的解释 一、前言 问题描述：Vue项目上线后，在IE浏览器上，从A页面跳转至B页面，B页面通过data中接收来自A页面的参数信…...

编程日记 2023/9/8 20:05:52

阿里云ubuntu服务器搭建ftp服务器

阿里云ubuntu服务器搭建ftp服务器 服务器环境安装步骤一.创建用户二.安装 vsftp三 配置vsftp四.配置阿里云安全组 服务器环境 阿里云上的云服务器，操作系统为 ubuntu20.04。 安装步骤 一.创建用户 为什么需要创建用户？ 这里的用户，指的是…...

编程日记 2023/9/8 20:04:51

03 卷积操作图片

一、均值滤波 # 卷积操作 # 输入图片. input, 必须是4维tensor(图片数量, 图片高度, 图片的宽度, 图片的通道数) # filters, 卷积核, 必须是4维的tensor(卷积核的高度和宽度, 输入图片的通道数, 卷积核的个数) # strides, 步长, 卷积核在图片的各个维度上的移动步长, (1, 1, 1,…...

编程日记 2023/9/8 20:03:49

软考：中级软件设计师:程序语言基础：表达式，标准分类，法律法规，程序语言特点，函数传值传址

软考：中级软件设计师:程序语言基础：表达式 提示：系列被面试官问的问题，我自己当时不会，所以下来自己复盘一下，认真学习和总结，以应对未来更多的可能性 关于互联网大厂的笔试面试，都…...

编程日记 2023/9/8 20:02:49

Java“牵手”1688商品详情数据，1688商品详情API接口，1688API接口申请指南

1688平台商品详情接口是开放平台提供的一种API接口，通过调用API接口，开发者可以获取1688商品的标题、价格、库存、月销量、总销量、库存、详情描述、图片等详细信息 。 获取商品详情接口API是一种用于获取电商平台上商品详情数据的接口，通过…...

编程日记 2023/9/8 20:01:48

stable diffusion实践操作-批次出图

系列文章目录 stable diffusion实践操作 文章目录 系列文章目录前言一、批次出图介绍1.1 webUI设置1.2 参数介绍 二、批次出图使用2.1 如何设置2.1 效果展示 总结 前言 本章主要介绍SD批次出图。 想要一次产生多张图片的时候使用。 一、批次出图介绍 1.1 webUI设置 1.2 参数…...

编程日记 2023/9/8 20:00:47

LeetCode热题100 【cpp】题解（一）哈希表和双指针

文章目录 1. 两数之和49. 字母异位词分组128. 最长连续序列283. 移动零11. 盛最多水的容器15. 三数之和42. 接雨水 题单链接： LeetCode 热题 100 1. 两数之和 leetcode题目链接 题解1：暴力枚举 时间复杂度： O ( n 2 ) O(n^2) O(n2) class …...

编程日记 2023/9/8 19:59:44

Python爬虫常见代理池实现和优化

在这篇文章中，我们将探讨Python爬虫中常见的代理池实现和优化方法。在爬取网站数据时，为防止被目标网站封禁IP，我们通常会使用代理IP进行访问。一个高效且稳定的代理池可以帮助我们轻松应对各种反爬策略。 　　首先，我们来了解一下…...

编程日记 2023/9/8 19:58:43

前端面试的话术集锦第 3 篇：进阶篇上

这是记录前端面试的话术集锦第三篇博文——进阶篇上，我会不断更新前端面试话术的博文。❗❗❗ 1 谈谈变量提升 当执⾏JS代码时，会⽣成执⾏环境，只要代码不是写在函数中的，就是在全局执⾏环境中，函数中的代码会产⽣函数执⾏环境，只此两种执⾏环境。 b() // call b conso…...

编程日记 2023/9/8 19:57:41

【文字到语音的论文总结】

1.文字到语音的整个过程 文字到语音的一般整体结构 主要是下面这个流程，每个网络可能会把其中两者或是三者融合在一起来； 长度不同的问题 生成的语音可能和文字的长度并不一样，因此需要解决这个问题 Tactron使用的是交叉注意力的方式解…...

编程日记 2023/9/8 19:56:40

E. Data Structures Fan(思维 + 异或前缀和)

Problem - E - Codeforces 给你一个整数数组 a1, a2,..., an，以及一个由 n 个字符组成的二进制字符串† s。 Augustin 是一个数据结构的爱好者。因此，他请你实现一个可以回答 q 个查询的数据结构。这里有两种类型的查询： Plain Text "1…...

编程日记 2023/9/8 19:55:39

初学python爬虫学习笔记——爬取网页中小说标题

初学python爬虫学习笔记——爬取网页中小说标题 一、要爬取的网站小说如下图 二、打开网页的“检查”，查看html页面 发现每个标题是列表下的一个个超链接，从183.html到869.html 可以使用for循环依次得到： x range(183,600) for i in x:pr…...

编程日记 2023/9/8 19:54:37

The WebSocket session [x] has been closed and no method (apart from close())

在向客户端发送消息时，session关闭了。 不管是单客户端发送消息还是多客户端发送消息，在发送消息之前判断session 是否关闭 使用 isOpen() 方法...

编程日记 2023/9/8 19:53:36

前端实现展开收起的效果 (react)

需求背景：需要实现文本的展开收起效果，文本是一行一行的，数据格式是数组结构。 如图所示（图片已脱敏） 简单实现：使用一个变量控制展开收起效果。 展开收起逻辑部分（react） const […...

编程日记 2023/9/8 19:52:35

ABY2.0：更低的通信开销

参考文献： [ABY] Demmler D, Schneider T, Zohner M. ABY-A framework for efficient mixed-protocol secure two-party computation[C]//NDSS. 2015.[ABY3] Mohassel P, Rindal P. ABY3: A mixed protocol framework for machine learning[C]//Proceedings of the…...

编程日记 2023/9/8 19:51:33

vue项目预览图片

1.图片为本地上传的预览&#xff1a; <input type"file" ref"file"/> <img :src"imgUrl"/>let fr new FileReader()fr.readAsArrayBuffer(this.$refs.file.files[0])fr.addEventListener("loadend", (e) > {let buff…...

编程日记 2023/9/8 19:50:31

Tomcat 安装

1.关闭防火墙 2.安装JDK包 3. 4。添加环境变量 5.刷新配置文件 6.解压文件 7.启动tomcat 8. 9.编写tomcat.service文件 vim /etc/systemd/system/tomcat.service 10.刷新服务 11.打开浏览器访问&#xff1a;192.168.2.100:8080/&#xff0c;正常可以看到以下界面...

编程日记 2023/9/8 19:49:29

计算机网络的故事——HTTP报文内的HTTP信息

HTTP报文内的HTTP信息 文章目录 HTTP报文内的HTTP信息一、HTTP 报文二、请求报文及响应报文的结构三、编码提升传输速率 一、HTTP 报文 HTTP报文是由多行&#xff08;CRLF作换行符&#xff09;数据构成的字符串文本&#xff0c;HTTP报文可以分为报文首部和报文主体两部分&…...

编程日记 2023/9/8 19:48:28

CF1120 D. Power Tree 巧妙的图论转化

传送门 [前题提要]:无 题目描述: 就是给你一棵树,然后每个点有花费,然后你可以选一个点,付费后对这个点的子树的所有叶子结点增减任意权值. 考虑有一个人会给这棵树的所有叶子结点赋值(值我们不知道),输出最小的花费,使得无论它如何赋值,我们使用上述的花 费都能使所有的叶子…...

编程日记 2023/9/8 19:47:27

【算法训练-字符串 三】最长公共子串、最长公共子序列

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【】&#xff0c;使用【】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条件为&#xff1a;目标公…...

编程日记 2023/9/8 19:46:26

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2026/2/8 5:22:04

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2026/2/3 7:43:45

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2026/2/4 12:43:08

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2026/1/11 0:40:53

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2026/2/4 11:21:40

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2026/1/15 1:34:10

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2026/1/20 22:45:38

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2026/2/6 1:18:56

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2026/2/6 22:55:12