Detailed explanation of JavaScript to monitor route changes

There are two main ways to implement routing changes on the front end. The biggest feature of these two methods is to implement the URL switching without refresh function

1. By changing the hash, use window.onhashchange to listen.
2. Through the change of history, js operation is performed to load the page. However, history is not as simple as hash, because the change of history, except for a few forward and backward operations of the browser (using history.back(), history.forward() and history.go() methods to complete the jump backward and forward in the user history record), will actively trigger the popstate event. PushState and replaceState will not trigger the popstate event.

history

Mainly to understand History

pushState() Method

It takes three parameters: a status object, a title (currently ignored), and (optional) a URL. Let's explain each of these in detail:

state object — The state object state is a JavaScript object that creates new history entries via pushState(). Whenever the user navigates to a new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object. A state object can be anything that can be serialized. The reason is that Firefox saves state objects on the user's disk for use when the user restarts the browser, and we have set a size limit of 640k for the serialized representation of the state object. If you pass a state object that is larger than 640k after serialization to the pushState() method, the method will throw an exception. If you need more space, it is recommended to use sessionStorage and localStorage.

title — Firefox currently ignores this parameter, but may use it in the future. Passing an empty string here should be safe against future changes to this method. Optionally, you can pass a short title for the state to redirect to.

URL — This parameter defines the new history URL record. Note that the browser does not load the URL immediately after calling pushState(), but may load the URL later in some cases (the resource will not be loaded, but we can change the view by listening to its changes, which becomes a way to implement single-page routing without refreshing the page), such as when the user reopens the browser. The new URL does not have to be an absolute path. If the new URL is a relative path then it will be treated as relative to the current URL. The new URL must have the same origin as the current URL (same-origin policy), otherwise pushState() will throw an exception. This parameter is optional and defaults to the current URL.

In some ways, calling pushState() is similar to setting window.location = "#foo" in that both create and activate new history records on the current page. But pushState() has the following advantages:

The new URL can be any URL with the same origin as the current URL. Conversely, setting window.location can only be the same document when modifying the hash.
If you don't want to change the URL, don't change it. Conversely, setting window.location = "#foo"; will only create a new history item if the current hash is not #foo.
You can associate arbitrary data with new history items. The hash-based approach encodes all relevant data into a short string.
If the headers are subsequently used by the browser, then this data can be used (the hash is not).

Note that pushState() will never trigger a hashchange event, even if the new URL differs from the old URL only in its hash.

pushState() usage scenarios

History can modify URL or URL parameters without refreshing

window.history.replaceState('', '', `${window.location.origin}${window.location.pathname}type=a`);

replaceState() method

The use of history.replaceState() is very similar to history.pushState(), the difference is that replaceState() modifies the current history item instead of creating a new one. Note that this does not prevent it from creating a new history item in the global browser history.
make

popstate event

Use window.onpopstate to listen for return events

window.onpopstate = funcRef;

funcRef : (Event:{state:any})=>void

Whenever the active history record changes, a popstate event is triggered on the corresponding window object (window.onpopstate). If the currently active history entry was created by the history.pushState() method, or modified by the history.replaceState() method, the state property of the popstate event object contains a copy of the history entry's state object.

**Notice:

1. Calling history.pushState() or history.replaceState() will not trigger the popstate event. The popstate event is only triggered by certain browser actions, such as clicking the back or forward button (or calling history.back(), history.forward(), history.go() methods in JavaScript). In addition, the anchor of the a tag will also trigger the event.
2. When a web page is loaded, each browser has different behaviors on whether the popstate event is triggered. Chrome and Safari will trigger the popstate event, while Firefox will not.

How to monitor pushState and replaceState?

We can implement it ourselves through the subscription-publishing mode: first use Dep and Watch, the subscription and publishing mode, which is actually a simplified version of the implementation method between the Vue source code dep and wantcher

class Dep { // Subscription pool constructor(name){
        this.id = new Date() //Here we simply use the timestamp as the ID of the subscription pool
        this.subs = [] //The collection of subscribed objects under this event}
    defined(){ // Add subscriber Dep.watch.add(this);
    }
    notify() { //Notify subscribers of changes this.subs.forEach((e, i) => {
            if(typeof e.update === 'function'){
                try {
                   e.update.apply(e) //trigger subscriber update function} catch(err){
                    console.warr(err)
                }
            }
        })
    }
    
}
Dep.watch = null;

class Watch {
    constructor(name, fn){
        this.name = name; //The name of the subscription message this.id = new Date(); //Here we simply use the timestamp as the subscriber's ID
        this.callBack = fn; //When the subscription message is sent and changed->the callback function executed by the subscriber}
    add(dep) { //Put the subscriber into the dep subscription pool dep.subs.push(this);
    }
    update() { //Update the subscriber method var cb = this.callBack; //Assignment in order not to change the this called in the function
        cb(this.name);          
    }
}

Re-implement the history method and add the addHistoryListener method

const addHistoryMethod = (function(){
 var historyDep = new Dep() // Create a subscription pool return function (name) {
  if(name==='historyChange'){
   var event = new Watch(name,fn);
   Dep.watch = evnet;
   historyDep.defind(); //Add subscriber Dep.watch = null;
  }else if(name==='pushState'||name==='replaceState'){
   var method = history[name];
   return function(){
    method.apply(history,argumnets)
    historyDep.notify();
   }
  }
 }
})()
window.addHistoryListener = addHistoryMethod('historyChange')
history.pushState = addHistoryMethod('pushState');
history.replaceState = addHistoryMethod('replaceState');

Encapsulation is successful, test usage example

window.addHistoryListener('history',function(){
 console.log('window history changed')
})
window.addHistoryListener('history',function(){
 console.log('Window history changed, I also heard it') // Multiple listening events can be bound console.log(history.state)
})
history.pushState({foo：bar}, 'title', '/car')

Get the current status

When the page loads, there may be a non-null state object. This might happen, for example, if the page sets the state object (via the pushState() or replaceState() methods) and then the user restarts the browser. Then when the page reloads, the page receives an onload event, but no popstate event. However, if you read the history.state property, you will get the same state object as you would get if popstate was triggered.

You can read the state object of the current history item without waiting for the popstate event, just use the history.state property like this:

let currentState = history.state;

contrast

Summarize

History is a way to implement non-refresh routing, which is particularly suitable for our single-page development to ensure a stable system experience. However, history does not monitor the behavior of pushState and replaceState, but only monitors the behavior of go, back, and forward. But we can use the subscription publishing mode, use Dep and Watch, repackage the pushState and replaceState events, and automatically trigger the notify method after calling it, and add an addHistoryListener method to add a listening callback (subscriber).

This concludes this article on how to use JavaScript to monitor route changes. For more information on how to use JavaScript to monitor route changes, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!