Vue进阶（六十七）页面刷新路由传参丢失问题分析及解决
文章目录
- 一、前言
- 二、问题排查
- 三、延伸阅读
- 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的配置，来决定记录的信息种类和细节。
打开Apache的配置文件：可以使用文本编辑器打开Apache的配置文件，通常位于
/etc/httpd/conf/httpd.conf。查找
LogFormat指令：该指令定义了您希望在access.log中记录的信息。调整格式字符串：在
LogFormat指令中，可以调整格式字符串以指定希望记录的信息。可以参考Apache文档，了解可用的格式字符串字符。保存更改：保存更改并退出文本编辑器。
重新启动Apache：使用以下命令重新启动Apache以使更改生效：
shell sudo service httpd restart
3.2 浏览器的常见User Agent 各字段的解释
User Agent是指浏览器在向服务器发送请求时，会在请求头中添加的一段字符串，用于标识浏览器的类型、版本、操作系统等信息。常见的User Agent包括以下字段：
Mozilla/5.0：表示浏览器使用的是Mozilla浏览器引擎，版本号为5.0。(
Windows NT 10.0; Win64; x64)：表示操作系统为Windows 10，使用的是64位架构。
AppleWebKit/537.36：表示浏览器使用的是Webkit引擎，版本号为537.36。(
KHTML, like Gecko)：表示浏览器使用的是KHTML渲染引擎，类似于Gecko。
Chrome/91.0.4472.124：表示浏览器为Chrome，版本号为91.0.4472.124。
Safari/537.36：表示浏览器为Safari，版本号为537.36。
Edge/91.0.864.59：表示浏览器为Edge，版本号为91.0.864.59。
Mozilla/4.0：表示浏览器使用的是Mozilla浏览器引擎，版本号为4.0。(
compatible; MSIE 7.0; Windows NT 6.0)：表示浏览器为IE7，操作系统为Windows Vista。(
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引擎。