vue browser returns the specific steps to listen

Preface

When sharing the page, you hope to click the browser fallback button to return to the project homepage and increase visits.

Need to listen to the browser's fallback button and block its default events.

The specific steps are as follows:

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

mounted(){
 if ( && ) {
 (null, null, );
 ('popstate', , false);
 }
},

2. When the page is destroyed, cancel the listening. Otherwise other vue routing pages will be listened to

destroyed(){
 ('popstate', , false);
},

3. Write the monitoring operation in methods. RemoveEventListener cancels the monitoring content and must be consistent with turning on the monitoring, so the function is written in methods.

methods:{
 goBack(){
 this.$({path: '/'});
 //Replace replaces the original route, the purpose is to avoid falling back to the dead loop }
}

Attachment: What is popstate used for?

How to use popstate?

HTML5's new API has been extended 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 is similar.

How to use:

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

Use of replaceState is similar, for example:("Home","",+ "#news");

Summarize

This is the article about the monitoring of vue browser returning to monitor. For more related content of vue browser returning to monitor, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!