Tag Archives: Vue refreshes

Vue refreshes the current page (no flash screen will appear)

Vue refreshes the current page (no flash)
No splash screen appears when vUE refreshes the current page

parent-child component values can also be passed after the parent component completes all operations without having to go to the child component </h6 b> 1. Add the v-if attribute

to app.vue

<router-view v-if="isRouterAlive"></router-view>
2. Add isRouterAlive in the data, of course, this property name can be defined by itself, the default value is true
data () {
      return {
        isRouterAlive: true
      }
  }
3. Methods add a refresh method
methods: {
  reload () {
    this.isRouterAlive = false
    this.$nextTick(function() {
       this.isRouterAlive = true
    })
  }
}

4. Finally, we need to provide this function (the same as data) </h6 b>

provide () {
  return {
    reload: this.reload
  }
}

So, that’s all set up on app.vue,
and then when we need to refresh, we just add this function to the page that we need

5. First inject this function
inject: ['reload'] (same to data)
6. Then refer to it where you need this function
refresh () {
this.reload()
}

This will refresh the page without the white screen