Specific steps for Vue browser to return monitoring

Preface

When sharing a page, you hope to click the browser back button to return to the project homepage to increase the number of visits.

You need to listen to the browser's back button and prevent its default event.

The specific steps are as follows:

1. After mounting is completed, determine whether the browser supports popstate

mounted(){
 if (window.history && window.history.pushState) {
 history.pushState(null, null, document.URL);
 window.addEventListener('popstate', this.goBack, false);
 }
},

2. When the page is destroyed, cancel the monitoring. Otherwise other vue routing pages will also be monitored

destroyed()
 window.removeEventListener('popstate', this.goBack, false);
},

3. Write the monitoring operation in methods. The content of removeEventListener to cancel the monitoring must be consistent with the content of opening the monitoring, so the function is written in methods.

methods:{
 goBack(){
 this.$router.replace({path: '/'});
 //replace replaces the original route to avoid falling back to an infinite loop}
}

P.S. What is popstate used for?

How to use popstate?

The new HTML5 API extends window.history to make history points more open. You can store the current history point pushState, replace the current history point replaceState, and listen to the history point popstate.

The usage of pushState and replaceState are similar.

Directions:

history.pushState(data,title,url);
//The first parameter data is the value of state; the second parameter title is the title of the page, but all current browsers ignore this parameter, so just pass an empty string; the third parameter url is the link you want to go to;

The usage of replaceState is similar, for example: history.replaceState("首頁","",location.href+ "#news");

Summarize

This is the end of this article about vue browser return monitoring. For more relevant vue browser return monitoring content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!