Apply provide and inject to refresh Vue page method

Method 1: Call the function directly

Reload the entire page. Either of the following will work:

1.window.location.reload()

2. this.$router.go()

Method 2: Use provide / inject (static refresh)

Declare a reload refresh function in the higher-order function

<template>
  <div id="app" v-if="show"></div>
</template>
<script>
export default {
  //Control display/hide, implement refresh data () {
    return {
      show: true
    }
  },
  // Pass the refresh method to the low-level component provide () {
    return {
      reload: this.reload
    }
  },
  methods: {
    // High-level component defines refresh method reload () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    }
  }
}
</script>

Using refresh functions in low-level components

<template>
  <div></div>
</template>
<script>
export default {
  inject: ['reload'],
  methods: {
    // Low-level component, refresh fun () {
      this.reload()
    }
  }
}
</script>

Advantages Comparison

• Directly calling the function in method 1 will cause the entire website to refresh, which will waste performance and provide a poor user experience. For large websites, you will need to wait a few seconds for the refresh animation to appear in the upper left corner of the browser.
• Method 2 uses provide / inject, so users will not feel the refresh, and the refreshed page content range can be controlled, which will waste less performance.

The above is the details of the method of applying provide and inject to refresh the Vue page. For more information about Vue page refresh, please pay attention to other related articles on 123WORDPRESS.COM!