Implementation of front-end routing

HistoryApi

window.history.length

window.history.state

window.history.go([delta])

window.history.back()

window.history.forward()

window.history.pushState(data,title,url)

window.history.replaceState(data,title,url)

Let’s just look at the last two apis

/** *parameters *@data {object} state object, this is a javascript object, usually JSON format object * literal. *@title {string} can be understood as document.title, which is passed in as a new page argument. *@url {string} Record added or changed, corresponding to the URL, can be a relative path or absolute path, * the specific format of the URL can be customized. */ history.replaceState(data,title,url) // Replace the current record in the history stackCopy the code

Both apis operate on the browser’s history stack without causing a page refresh. The difference is that pushState adds a new history, while replaceState replaces the current history. The required parameters are the same, and after the new history is pushed onto the stack, the incoming data (that is, the state object) is also stored for later invocation. At the same time, both apis update or override the title and URL of the current browser to match the parameters passed in.

The url parameter can be an absolute path: www.tonylee.pw/name/tonyle…

Can also be relative path:? Name = tonylee, / name/tonylee

// Assume that the current URL is: http://tonylee.pw window.history.pushState(null, null,"http://tonylee.pw? name=tonylee"); // Url change: http://tonylee.pw -> http://tonylee.pw? name=tonylee window.history.pushState(null, null,"http://tonylee.pw/name/tonylee"); / / the url: http://tonylee.pw - > http://tonylee.pw/name/tonylee window. History. PushState (null, null,"? name=tonylee"); // Url change: http://tonylee.pw -> http://tonylee.pw? name=tonylee window.history.pushState(null, null,"name=tonylee"); // URL change: http://tonylee.pw -> http://tonylee.pw/name=tonylee window.history.pushState(null, null,"/name/tonylee"); / / the url: http://tonylee.pw - > http://tonylee.pw/name/tonylee window. History. PushState (null, null,"name/tonylee"); / / change the url: http://tonylee.pw - > HTTP: / / http://tonylee.pw/name/tonylee / / wrong usage: window. History. PushState (null, null,"http://www.tonylee.pw?name=tonylee"); //error: ReplaceState and pushState have the same properties as the above test. If possible, the incoming URL is always handled appropriately, with a "/" between them. You can also specify "? And so on. Note that neither API is cross-domainCopy the code

The Url, as a parameter that changes the current browser address, is handled appropriately, either with “/” or with “? “. And so on. Note that neither API is cross-domain

popstate

Popstate events are generated when the same page switches between history records. Normally, if the user hits the back button or the developer calls history.back() or history.go(), the page doesn’t have a chance to handle the event at all, because these actions make the page reload. So popState is triggered only by switching between histories that do not refresh the browser page, typically by pushState/replaceState or by hash anchors. And a referenced copy of the state object can be accessed in the handle of the event! And a simple call to pushState/replaceState does not trigger the popState event.

Hashchange

Hashchange is triggered when the page hash(#) changes. The anchor Hash instructs the browser to push the record to the top of the history stack. The window.location object handles the “#” change without reloading the page, but instead places it in the history stack as a new page.

Hash + hashchange implementation

Location. hash always points to anything after the # in the page URL

Hash =’ #/hello’ when the url of the current page is ‘www.baidu.com’, you can type location.hash in the browser console as empty, and location.hash =’ #/hello’ when the page points to the URL =’www.baidu.com/#/hello’. The location of the current page is known by reading location.hash. The hashchange event allows you to listen for changes in location.hash and handle them accordingly.

So how do you trigger a hash change? There are two main methods:

Href = ‘#/blue’ href = ‘#/blue’ href = ‘#/blue’

Hash = ‘#/blue’. The url will change and the hashchange event will be triggered.

For personal finishing only, refer to:

Implementation of front-end routing

Analysis of several ways to realize front-end routing in Web development