Hash front-end route, no refresh

History is going to request the interface

The reason for both patterns: progressive front-end development framework, in order to implement SPA, need to introduce a front-end routing system). The heart of front-end routing is this: Changing views without making requests to the back end. To do this, browsers provide hash and History modes. Hash: 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. History: History leverages the new pushState() and replaceState() methods in the HTML5 History Interface. These two methods apply to the browser record stack and provide the ability to modify the history in addition to the existing back, Forward, 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 properties of the browser itself. For example, vue-router only uses these two features (by calling the interface provided by the browser) to implement routing. The hash mode is based on the onHashChange event, which can be listened on the window object. History: Hashchange only changes code snippets following #, while the History API (pushState, replaceState, Go, back, Forward) gives the front end complete freedom by listening for popState() events on window objects. The pushState() and replaceState() methods take three arguments: stateObj, title, and URL.

/ / set the state history. PushState ({color: “red”}, “red”, “red”);

Window. onpopState = function(event){console.log(event. State); if(event.state && event.state.color === “red”){ document.body.style.color = “red”; }}

// Change the state history.back(); history.forward(); Application scenarios of duplicate code: PushState stores the state of the page in a state object. When the page URL changes back to the same URL, the event. State can be retrieved from the state object and the page state can be restored. Such as page scroll bar position, reading progress, component switch and so on. Calling history.pushstate () has advantages over using hash: The URL set by pushState can be any URL of the same origin; Hash can only change the part after #, so you can only set the current URL to the document’s urlpushState, and the new URL can be the same as the current URL, which will also add records to the stack; The new hash value cannot be the same as the old one. The same value does not trigger an action to add records to the stack. PushState The stateObject argument allows you to add any data type to a record. PushState can set an additional title attribute for subsequent use disadvantage: history When a page is refreshed, 404 will appear if there is no response or resource on the server. Therefore, if the URL does not match any static resources, the same index.html page should be returned. This page is the hash mode on which your app depends, and only the content before # is included in the HTTP request. For the back end, 404 is not reported even without full routing coverage