vue listens for routing changes in file refresh page operation

When the route is redirected, the page will appear that you need to refresh it again to obtain the data loading page. At this time, a listener will be added. If you jump to the page, refresh it once.

export default {
 name: 'App',
 provide(){
 return{
  reload:
 }
 },
 data(){
 return {
  isRouterAlive:true,
 }
 },
 //Listener watch: {
 // Method 1 '$route' (to, from) { //Whether the listener route changes  // (999)
  if( == "/"){ // Which page to jump to  ()
  }
 },
 },
 methods:{
 reload(){
   = false;
  this.$nextTick(function () {
   = true
  });
 },
 },
}

Supplementary knowledge:Changes in vue listening routes and refreshes and departures in listening pages

We must distinguish the difference between the two.

First of all, the refresh and departure of the monitor page. At this time, it is equivalent to directly pressing refresh in this web page. If it is a webapp, it is leaving the app instead of switching routes!

If you use js' feature monitoring, you can not only refresh and leave the page, but also switch routes. Note that when keepalive, it is invalid even if the route is switched.

Directly add listener monitoring beforeunload in script:

    //Surveillance if the page leaves    created() {
      ('beforeunload', )
    },
    beforeDestroy() {
      (); // What you want to do    },
    destroyed() {
      ('beforeunload', )
    },

Then add finalItemDetail and updateHandler methods in methods:

      updateHandler() {
        ()
      },
      finalItemDetail() {
        ('Refresh or close');
      },

If you want to listen to the departure of a specific page, for example, I am under /index and now go to /index/001, and you can listen to the changes in the route in the watch, as long as it is practical vue-router.

If you simply judge the route changes, you can comment it out and execute the clear method directly (defined in methods yourself)

But pay attention to this only listen to changes in your own subroutine!

    watch: {
      // If the route changes, the clear method will be executed again      // "$route": "clear",
      $route(to , from){
        ( ,  );
        ();
      }
    },

Then I made an extra judgment:

      clear(path) {
        if(path!="/item/item01/evaluate")
          ("Leaved from this page");
        this. active=0;
      },

The above article Vue monitors routing changes in the file and refreshes the page operation is all the content I share with you. I hope you can give you a reference and I hope you can support me more.