Why hash and history

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 types of support:

  1. hash— in the URL of the address bar#Symbol (this hash is not a hash in cryptography).

    Like this URL:http://www.abc.com/#/hello, the hash value is#/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.
  2. history— takes advantage of new additions to the HTML5 History InterfacepushState() 和 replaceState()Methods. (Browser specific support required)

    Both methods are applied to the browser’s history stack, which is currently existingback,forward,goOn the basis of, they provide the ability to modify historical records. 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 general, hash and history will work, unless you’re more concerned with the appearance level, and the # symbol does look a little ugly 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. — Official website of vue-router

In addition, calling history.pushState() has the following advantages over modifying hash directly, according to Mozilla Develop Network:

  • pushState()The new URL can be any URL of the same origin as the current URL. whilehashCan only be modified#So you can only set the URL of the same document as the current URL;
  • pushState()A new URL can be set to be exactly the same as the current URL, which also adds the record to the stack; whilehashThe new value must be different to trigger the action to add the record to the stack;
  • pushState()throughstateObjectParameters can add any type of data to a record; whilehashOnly short strings can be added;
  • pushState()Additional Settings availabletitleProperty for later use.

Of course, history isn’t all good. SPA works fine in a browser, but when it comes to making an HTTP request to the back end of a URL, the difference comes. This is especially true when the user manually enters the URL and hits the press enter, or when the browser is refreshed (or restarted).

  1. hashIn mode, onlyhashThe content before the symbol is included in the request, for examplehttp://www.abc.com, so the back end will not return a 404 error even if full routing coverage is not achieved.
  2. historyIn this mode, the URL of the front end must be the same as that of the actual request from the back endhttp://www.abc.com/book/id. If the back end lacks a pair/book/idA 404 error will be returned.Vue – the Router’s official websiteIn this description:“But this mode to play well, also need to support the background configuration… 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 depends on.”

summary

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

Transfer: https://segmentfault.com/q/1010000010340823