Shulou(Shulou.com)06/02 Report--

Editor to share with you what are the differences between hash routing and history routing in Vue. I hope you will gain something after reading this article. Let's discuss it together.

The difference between hash routing and history routing can be sorted out from the following aspects:

1. Good appearance

Hash: the # symbol in the address bar URL. For example, this URL: http://www.abc.com/#/hello, the value of hash is # / hello. Its feature is that although hash appears in the URL, it is not included in the HTTP request and has no impact on the back end at all, so changing the hash will not reload the page.

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

II. Function

History: when developing app, there is a sharing page. The shared page is made with vue or react. We share this page with a third-party app. Some app do not allow url with a # sign, so it is necessary to use history mode to remove the #. But there is also a problem with using history mode, that is, when accessing the secondary page, a refresh operation will result in a 404 error. Then you need to cooperate with the backend person to configure the url redirection of apache or nginx and redirect to your home page route.

3. Enter to refresh

Hash: although it appears in the URL, it is not included in the HTTP request and has no effect on the backend at all, so changing the hash will not reload the page.

History: takes advantage of the new pushState () and replaceState () methods in HTML5 History Interface.

These two methods are applied to the history stack of the browser. On the basis of the existing back (), forward (), go () methods, these two methods provide the function to modify the history record. When you use these two methods to make changes, you can only change the URL of the current address bar, but the browser will not send a request to the backend or trigger the execution of the popstate event.

Fourth, use the scene

In general, both hash and history are fine, and if you are a good-looking person, you are a little uncomfortable with the # symbol in the URL.

If you don't want an ugly hash, you can use the routed history mode, which takes full advantage of history.pushState API to complete the URL jump without reloading the page. Calling history.pushState () has the following advantages over directly modifying hash:

The new URL set by pushState () can be any URL; of the same origin as the current URL, and the hash can only modify the part that follows #, so you can only set the URL of the same document as the current URL.

The new URL of the pushState () setting can be exactly the same as the current URL, which also adds the record to the stack, while the new value of the hash setting must be different from the original to trigger the action to add the record to the stack

UshState () can add any type of data to the record through the stateObject parameter, while hash can only add the short string pushState () to set the title attribute for later use.

After reading this article, I believe you have a certain understanding of "what is the difference between hash routing and history routing in Vue". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.