js - The difference between the front-end hash mode and history mode and refresh 404 problem

1. Front-end routing principle

In the front-end single page ( SPA), there is only one html page. Simply changing the browser address will not request a new html page. Instead, it will change and 监听路由的use JS to dynamically display and hide page content to achieve similar multiple web pages. The switching effect;
the routing mode for switching is also divided into two types:hash模式 和 history模式

2. hash mode

Overview:
hash refers to the # in the address and the following characters. This # is the hash symbol, the Chinese name hash symbol or anchor point, and the value after the hash symbol is called the hash value; for example:

http://localhost:31001/#/videoProduce
http://localhost:31001/#/xgplayer

#/videoProduceThe sum here #/xgplayeris hash.

Features:
Although the hash appears in the URL, it will not be included in the HTTP request, and has no effect on the requested backend resources at all.因此改变 hash 不会重新加载页面。

The hash mode of the route actually uses the window to listen to onhashchangeevents, which can monitor changes in the hash value of the browser address and execute the corresponding js to switch web pages. In this way, even if the front end does not initiate an http request, it can find the code block of the corresponding page and load it on demand.

3. History mode

Overview:
The window.history property points to the History object, which represents the browsing history of the current window, updating the URL address does not resend the request. The History object stores URLs of all pages visited by the current window, and some methods it provides are as follows:

method	describe
back()	This method goes to the previous page in the browser session history, the same behavior as if the user clicked the browser's Back button. Equivalent to history.go(-1).
forward()	This method goes to the next page in the browser session history, the same as if the user clicked the browser's forward button.
go()	This method loads a specific page from the session history. You can use this to move forward and backward in the history, depending on the parameter value you pass. Note: both window.history.go() and go(0) will reload the current page;
pushState()	This method is used to add a record to the history. The pushState() method will not trigger a page refresh, but only cause the History object to change, and the address bar will change;
replaceState()	This method is used to modify the current record of the History object, the usage is the same as the pushState() method;

Disadvantages : Refreshing the page will report 404; the solution is as follows:

4. Solve the problem of refreshing 404

My vue front-end project is deployed nginxlocally. When the routing mode is hash mode, there is no problem refreshing the page. When it is history mode, refreshing the page will report a 404 error;

---

history routing mode:

const router = new VueRouter({
    
    
  mode: 'history',
  base: process.env.BASE_URL, // 应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/”
  routes,
});

Reason : What we create using frameworks such as vue is actually a single-page application, with only one html page, and the routing mode is history时
Refresh the page, the browser will initiate a getrequest (see the right part of the above figure), and the path of the request is my current page refresh path:http://localhost/video/videoProduce

The project path of my nginx proxy is that /video/if you directly access it, http://localhost/video/there is no problem, because nginx can match /video/and find the index.html file under the alias directory and run it, that is, start the front-end project;

But what I visited is that if /video/videoProduceit doesn’t match, of course it will report 404;

  		# 视频演示项目 http协议
        location /video/ {
    
    
            alias  D:/myProject/deployProject/video/;
            index index.html index.htm;
        }

solution:

Add a line of configuration to the nginx configuration:try_files $uri $uri/ /index.html last;

Explanation:
Try to parse the following 2 files/folders (automatically distinguish whether the path behind the IP is a file or a folder), $uri/$ uri/;
if resolved, return the first one, if not resolved, initiate a request jump to 127.0.0.1/index.html (the route must be real, otherwise an error will be reported)

Correct spelling:

# 视频演示项目 http协议
 location /video/ {
    
    
​      alias  D:/myProject/deployProject/video/;
​      try_files $uri $uri/ /index.html last;
​      index index.html index.htm;
​    }

This is the solution given by the vue official website; https://router.vuejs.org/zh/guide/essentials/history-mode.html

5. Comparison of two routing modes

The comparison of the two routing modes is as follows:

	hash	history
url display	Always have # in the address, it is not beautiful	The address is clean and beautiful
page refresh	Can be loaded to the page corresponding to the hash value	May appear 404 page not found
supported version	Support low version browser and IE browser	HTML5 new API
Online deployment	none	Need to set up nginx configuration

Notice:

• If the user considers the specification of the url, then they need to use the history mode, because the history mode has no # sign, and it is a normal url suitable for promotion.
• There are also differences in its functions. For example, when we develop an app, we have a sharing page. We share this page with a third-party app. Some apps do not allow URLs with # symbols, and they will be marked as illegal. So if you want to remove the # sign, you need to use the history mode.