A brief analysis of the difference between hash routing and history routing in Vue

When using front-end rendering such as Vue or React, there are usually two routing methods: hash routing and history routing. So what is the difference between these two routing methods? Let me introduce it to you below, I hope it will be helpful to you!

Let’s sort out the differences between the two modes of hash routing and history routing from the following aspects:

1. Appearance

hash: The # symbol in the URL in the address bar. For example, this URL: http://www.abc.com/#/hello, the value of hash is #/hello. Its characteristic is that although the hash appears in the URL, it will not be included in the HTTP request and has no impact on the backend at all, so changing the hash will not reload the page. [Related recommendation: "vue.js Tutorial"]

history: There is no # in the address bar. For example, this URL: http://www.abc.com/hello is more beautiful and a normal URL, suitable for promotion.

2. Function

history: When developing the app, there is a sharing page. This shared page is made with vue or react. Let’s put this page Share to third-party apps. In some apps, the URL is not allowed to contain the # number. Therefore, if you want to remove the # number, you must use the history mode, but use history Another problem with the model is that when accessing the secondary page and doing a refresh operation, a 404 error will appear. Then you need to cooperate with the back-end person and let him configure the url redirection of apache or nginx to redirect to you. Just fine on the homepage route.

3. Enter to refresh

• #hash: Although it appears in the URL, it will not be included in the HTTP request. For the backend It has no effect at all, so changing the hash will not reload the page;

• history: Taking advantage of the new pushState() ## in the HTML5 History Interface #and replaceState() method.

  These two methods are applied to the browser's history stack, in the currently existing

  back(), forward(), go() Based on the method, these two methods provide the function of modifying historical records. When using these two methods to perform modifications, can only change the URL of the current address bar, but the browser will not send a request to the backend, nor will it trigger the execution of the popstate event. Generally, 404 will appear. At this time, You need to cooperate with the back-end people to set up redirection.

4. Usage Scenarios

Under normal circumstances, hash and history are both acceptable. If you are a beauty lover,

# Symbols mixed in URLs are a bit unpleasant.

If we don’t want an ugly hash, we can use the routing history mode, which makes full use of the history.pushState API to complete URL jumps without reloading the page. Compared with directly modifying the hash, calling history.pushState() has the following advantages:

1. pushState() The new URL set can be of the same origin as the current URL. Any URL; and hash can only modify the part after #, so you can only set the URL of the same document as the current URL;

2. pushState() The new URL set It can be exactly the same as the current URL, which will also add the record to the stack; and the new value set by the hash must be different from the original to trigger the action to add the record to the stack;

3. ushState() Any type of data can be added to the record through the stateObject parameter; while hash can only add short strings pushState() The title attribute can be additionally set for subsequent use.

5. Summary

Traditional routing is that when a user accesses a URL, the corresponding server will receive the request and then parse the path in the URL to execute Corresponding processing logic, thus completing a route distribution.

Front-end routing does not involve the server. It is implemented by the front-end using hash or HTML5 history API. It is generally used for the display and switching of different content.

For more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of A brief analysis of the difference between hash routing and history routing in Vue. For more information, please follow other related articles on the PHP Chinese website!