This is the fourth day of my participation in the August More text Challenge. For details, see:August is more challenging

Vue-router implements front-end routing through hash and History. Updating a view without re-requesting a page is one of the core principles of front-end routing. Currently, there are two ways to implement this function in the browser environment

  • hash: Implements route change by using the hash (” # “) in the URL
  • HistoryUse:HTML5History API pair providedhistoryStack contents to operate on

So what’s the difference between the two methods:

Hash mode:

The hash of the URL, also known as the anchor point (#), essentially changes the href property of window.location. We can change the href by directly assigning location.hash, but the page does not refresh. In this mode, # is added to the link

Such as:

    http://localhost:8080/#/pageName
Copy the code

The hash appears in the URL but is not included in the HTTP request and has no effect on the back end, so changing the hash does not reload the page.

The History mode:

History uses the HISTORY API provided by HTML5 to manipulate page routing

Such as:

    http://localhost:8080/pageName
Copy the code
  • history.pushState()
  • history.replaceState()
  • history.go()
  • History.back () is equivalent to history.go(-1)
  • History.forward () is equivalent to history.go(1)

The hash and History methods apply to the browser’s History stack and provide the ability to modify the History on top of the existing back, Forward, and GO methods. It’s just that when they make a change, even though the current URL is changed, the browser doesn’t send the request to the back end.

Thus, the hash and HISToury patterns are both features of the browser itself, and vue-Router simply takes advantage of these two features (by calling the interface provided by the browser) to implement front-end routing.

Usage scenario:

In general, both hash and HISToury work, but if you don’t want # in the link, you can choose to use the history mode of the route, which makes full use of history. PushState API to complete URL redirection without reloading the page.

Calling history.pushState() has the following advantages over modifying the hash directly:

  • The new URL set by pushState() can be any URL of the same origin as the current URL; Hash can only change the part after the #, so you can only set the URL of the same document as the current URL.
  • PushState () can set the new URL to be exactly the same as the current URL, which will also add the record to the stack; The new hash value must be different from the original value to trigger the action to add the record to the stack;
  • PushState () adds any type of data to the record with the stateObject parameter. Hash can only add short strings;
  • PushState () sets the additional title attribute for later use.

But the difference comes when you need to make HTTP requests back end through urls. This is especially true when the user manually enters the URL and presses enter, or refreshes (restarts) the browser.

  • In hash mode, only the content before the hash symbol is included in the request, such as www.aa.com. Therefore, the backend does not return a 404 error even if the route is not fully covered.
  • In history mode, the URL of the front end must be the same as the URL of the actual request from the back end. Such as: htttp://www.abc.com/book/id, if the back-end lack of/book/id route processing, returns a 404 error