“This is the 11th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

When Vue or React is used for rendering, there are usually hash routes and history routes. What’s the difference between these two models? Comb through it from the following aspects:

First, the level of appearance

Hash: the # symbol in the URL of the address bar. For example, the URL: http://www.abc.com/#/hello has a hash value of #/hello. The trick is that the hash, while present in the URL, is not included in the HTTP request and has no impact on the back end, so changing the hash does not reload the page.

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

Second, the function of

history: When developing the app, there was a sharing page. The shared page was made with Vue or React. We shared the page with a third party app. If you need to configure apache or Nginx url redirection, you can redirect the url to your home page. If you need to configure apache or Nginx URL redirection, you can redirect the url to your home page.

Enter to refresh

  • Hash: Although present in the URL, it is not included in the HTTP request and has no impact on the back end, so changing the hash does not reload the page;

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

    These two methods apply to the browser’s history stack and provide the ability to modify the history in addition to the existing back(), forward(), and Go () methods. When using these two methods to make changes, only the URL of the current address bar can be changed, but the browser does not send requests to the back end, nor does it trigger the execution of the PopState event.

Four, use scenarios

In general, hash and history will work, but if you’re a physical geek and have a problem with the # symbol being mixed up in the URL.

If you don’t want ugly hashes, you can use the history mode of the route, which takes full advantage of the history.pushState API to do URL jumps without reloading the page. Calling history.pushState() has the following advantages over modifying the hash directly:

  1. PushState () sets the new URL to any URL of the same origin as the current URL; Hash can only change the part after #, so you can only set the URL of the same document as the current URL.

  2. PushState () sets the new URL to be exactly the same as the current URL, which also adds the record to the stack; The new hash value must be different to trigger the action to add the record to the stack;

  3. UshState () uses the stateObject argument to add any type of data to a record; Hash can only add a short string called pushState() and an additional title attribute for subsequent use.

Five, the summary

In traditional routing, when a user accesses a URL, the corresponding server receives the request and then resolves the path in the URL to perform the corresponding processing logic, thus completing a route distribution.

Front-end routing does not involve the server and is implemented by the front-end using hash or HTML5 history API, which is generally used to display and switch between different content.