preface

During the development of the Vue project, I encountered a page style mess. After exploring the problem, it was found that using the simplest page refresh methods location.reload() or this.$router.go(0) would lead to blank phenomenon in the page refresh process, resulting in poor user experience. Therefore, we continued to explore the solution.

The business scenario

In the admin background, when you’re done adding, deleting, modifying. We need to refresh the page and reload the data. In JQ we use the location.reload() method to refresh the page; In vUE, a provide/Inject pair of use cases is needed. (Other methods: this.$router.go(0), will force a refresh, a blank page, poor user experience.)

Note: Provide/inject This pair of options needs to be used together to allow an ancestor component to inject a dependency to all of its descendants, no matter how deep the component hierarchy is, and remain in effect as long as its upstream and downstream relationships are established

Realize the principle of

Show -> flase -> show -> show -> show -> show

Application code

1. First, in our root component app.vue, we write the refresh method, and the initial state of the route is displayed.

<template>
  <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  provide (){
     return {
       reload:this.reload
     }
  },
  data(){
    return {
       isRouterAlive:true
    }
  },
  methods:{
    reload (){
       this.isRouterAlive = false
       this.$nextTick(function(){
          this.isRouterAlive = true
       })
    }
  },
  components:{
  }
}
</script>
Copy the code

2. Then reference it in the child component



3. After performing the corresponding operations, invoke the reload method