For a progressive front-end development framework like Vue, in order to build SPA (single-page application), it is necessary to introduce a front-end routing system, which is the significance of vuE-Router. That’s the core of front-end routing — changing the view without making a request to the back end.

To achieve this, browsers currently provide the following two methods:

  1. Hash — the (#) symbol in the address bar URL

For example, the following URL:

http://160.238.86.82:8003/#/index

The hash value is #/index

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

  1. history— takes advantage of new additions to the HTML5 History InterfacepushState() 和 replaceState()methods

These two methods apply to the browser’s history stack and provide the ability to modify the history in addition to the existing back, Forword, and Go methods. It’s just that when they make changes that change the current URL, the browser doesn’t immediately send requests to the back end

Therefore, both hash and history modes are browser features, and vue-Router only uses these two features (by calling the interface provided by the browser) to implement front-end routing

Usage scenarios

In common scenarios, both hash and history can be used

If you don’t want to hash, you can use the history mode of the route, which makes full use of the history.pushState API

URL jumps without reloading the page

In addition, calling history.pushState() wants to have some advantages over modifying the hash directly:

  • 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.

  • 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;

  • PushState () uses the stateObject argument to add any type of data to a record; Hash can only add short strings;

  • PushState () sets the title property in addition for later use.

Of course, history isn’t exactly hashing, and SPA works fine in a browser, but when it comes to making HTTP requests from the BACK end of a URL, there’s a big difference. This is especially true when the user manually enters the URL and hits the press enter, or when the browser is refreshed (or restarted)

  • Hash mode, only the content of the hash symbols before will be included in the request, such as: http://160.238.86.82:8003, so for the backend, if not do right by the full cover, also won’t return a 404 error.

  • The history mode, the front end of the URL must be initiated and the actual backend requested URL, such as: http://160.238.86.82:8003/age/id, if the back-end lack of routing processing/age/id, returns a 404 error.

But this mode to play well, but also need background configuration support…… So, you add a candidate resource on the server that covers all cases: if the URL doesn’t match any static resource, it should return the same index.html page that your app relies on.

What is the history mode afraid of?

With the history API, we get rid of the ugly #, but it also has a problem:

Not afraid to go forward, not afraid to go back, but afraid to refresh, F5, (if the back end is not ready), because the refresh is actually requesting the server, not playing virtual.

In hash mode, the front-end route modiates the information in # and the browser does not play with it when requesting it, so there is no problem. Under History, however, you are free to change the path, and if there is no response or resource on the server, a 404 will spawn every minute.

conclusion

Considering its own situation, for general Web development scenarios in the form of Vue + VUe-Router + Webpack + XXX, you can use the history mode, and only need to do simple routing configuration on the back end (Apache or Nginx). Plus 404 page support for front-end routing.

^ _ <