Example of refreshing page operation when vue implements the route unchanged

This article describes the refresh page operation when vue implements the route unchanged. Share it for your reference, as follows:

Background 1: In the background management project written by vue, there are often operations such as adding, deleting, modifying and checking. These operations are only interacting with the interface and the background.

Since you use interface interaction, it must be an asynchronous request from axios. That means the background data has changed, but the front-end data is not updated in real time (the background will return the list data to you after each operation, but in this way, the amount of data in each interaction will be too large)

Background 2: Using dynamic routing configuration/detail/:id In this case,router-view It is reused, and simply changing the value of id will not refreshrouter-view

So you have to think of a way to let the backend return an operation result after the background has completed the operation, and then the frontend manually refreshes the page.

At first I thought of using()orthis.$(0)These two methods, but later I found that these two methods will have a short white screen time and the user experience is not very good, so I gave up and looked at other people's practices and sorted out the following two methods:

1. Use the method of transit station

This method means that after each operation is completed, the route will be redirected to this transit site page, and then the page will get the path of the route incoming and then return. This method can be used as one of the solutions, and the second one is commonly used.

2. Provide / inject method

This method is to inject a reload method into all descendants' pages through provide, and then inject it through inject on the page you need to use. The code is as follows:

<template>
 <div >
  <router-view v-if="isRouterAlive"></router-view>
 </div>
</template>

<script>
export default {
 name: "App",
 provide() {
  return {
   reload: 
  };
 },
 data() {
  return {
   isRouterAlive: true
  };
 },
 methods: {
  reload() {
    = false;
   this.$nextTick(function() {
     = true;
   });
  }
 }
};
</script>

Subpage

export default {
  name: 'children',
  inject: ['reload'],
  data(){
    return {}
  }
  methods: {
    delData(){
      //In the successful callback of axios      ();
    }
  }
}

I hope this article will be helpful to everyone's programming.