Vue advanced (sixty-seven) page refresh route parameter loss analysis and solution

I. Introduction

Description of the problem: After the Vue project is launched, on the IE browser, jump from page A to page B, and page B receives the parameter information from page A through data, and calls the service interface serviceB.1 in the life cycle of the created page, and returns After the data, the B page data is rendered and displayed. After the page B is refreshed, the input parameters of the serviceB.1 interface are lost and the non-null check has not been performed on the input parameters, which leads to the full table query of serviceB.1, resulting in memory overflow.

2. Troubleshooting

By checking the access_log log of the Apache application server, it is found that the user performed a refresh operation on the current page.

By looking at the code, we know that the routing parameter acquisition is implemented in datathe this.$route.query.parammethod. mountedMake method calls in the hook function .

It is preliminarily suspected that the parameters obtained in data are obtained asynchronously when the page is refreshed, and the moutedrouting parameters have not been obtained when the hook function is executed.

The solution is to solve it by setting a delay, but the value of the delay is not easy to measure accurately. The routing parameters can be obtained before the hook function method is executed.

3. Extended reading

3.1 Apache server access_log log

Apache's access.logfiles are logged each time a user accesses them. This could be a user browsing a website, downloading a file, submitting a form, or making another type of request. Each record will contain details about the request, including:

• IP Address : The requested client IP address.
• Timestamp : The time when the request occurred.
• Request Method : The HTTP method used by the request (such as GET or POST).
• Requested resource : The URL requested by the client.
• Status Code : The HTTP status code of the server response (such as 200 or 404).
• Data volume : The data volume of the server response.
• Referring page : If present, the page from which the request originated.
• User-Agent : Information about the browser used by the client.

You can adjust the configuration of Apache through the following steps to determine the types and details of recorded information.

1. Open Apache's configuration file: You can use a text editor to open Apache's configuration file, usually located at /etc/httpd/conf/httpd.conf.

2. Lookup LogFormatDirective: This directive defines access.logthe information you wish to record in .

3. Adjust the format string: In LogFormata directive, you can adjust the format string to specify the information you want to log. Consult the Apache documentation for available format string characters.

4. Save Changes: Save changes and exit the text editor.

5. Restart Apache: Restart Apache with the following command for the changes to take effect:

   shell sudo service httpd restart

3.2 Explanation of each field of the browser's common User Agent

User AgentIt refers to a string that the browser will add to the request header when sending a request to the server, which is used to identify the browser type, version, operating system and other information. Common ones User Agentinclude the following fields:

1. Mozilla/5.0: Indicates that the browser uses the Mozilla browser engine, and the version number is 5.0.

2. ( Windows NT 10.0; Win64; x64): Indicates that the operating system is Windows 10, using a 64-bit architecture.

3. AppleWebKit/537.36: Indicates that the browser uses the Webkit engine, and the version number is 537.36.

4. ( KHTML, like Gecko): Indicates that the browser uses the KHTML rendering engine, similar to Gecko.

5. Chrome/91.0.4472.124: Indicates that the browser is Chrome, and the version number is 91.0.4472.124.

6. Safari/537.36: Indicates that the browser is Safari, and the version number is 537.36.

7. Edge/91.0.864.59: Indicates that the browser is Edge, and the version number is 91.0.864.59.

8. Mozilla/4.0: Indicates that the browser uses the Mozilla browser engine, and the version number is 4.0.

9. ( compatible; MSIE 7.0; Windows NT 6.0): Indicates that the browser is IE7 and the operating system is Windows Vista.

10. ( Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko: indicates that the browser is IE11, the operating system is Windows 7, and the Trident engine is used.

• Mozilla/5.0: The logo of Netscape’s browser. Since the browser market in the early days of the Internet was mainly occupied by Netscape, many servers were set to only respond to requests containing browsers marked as Mozilla. Therefore, in order to enter the market, new browsers Had to add this field.

• Windows NT 6.3: identifier for Windows 8.1;

• WOW64: 32-bit Windows system runs on a 64-bit processor;

• AppleWebKit/537.36: a rendering engine developed by Apple;

• KHTML: KHTML is the rendering engine of the Konqueror browser on the Linux platform;

• Geckeo: rendering engine;

• like Gecko: Indicates that its behavior is similar to the Gecko browser engine;

For example, the User-Agent information is as follows:

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

The above proxy information can be parsed as: the application system runs on Win10 and IE11 browsers and uses the Trident engine.