Let me explain in detail how to implement full page or partial refresh in Vue

How to implement page refresh in vue? The following article will introduce to you how to implement full page refresh and partial refresh in Vue. I hope it will be helpful to you!

1. Full page refresh

1. Modify App.vue, the code is as follows:

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

<script>
export default {
  name: &#39;App&#39;,
  provide() { // 父组件中返回要传给下级的数据
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

The key points are as shown in the figure below:

2. Go to the page that needs to be refreshed and use inject to import and quote reload:

3. When you need to call Call this.reload() in the method

2. Partial refresh

1. Define a variable isReloadData and bind the variable to On the tag that needs to be refreshed:

2. Define the partial refresh method reloadPart:

3. Call in the method that needs to perform partial refresh

3. Application scenario

• When dynamically modified in the page Some data, or data brought by props, or attributes dynamically set through funcation, may not display the latest data after modification.
• When page data changes, page rendering will cause bugs. For example, after the data of the el-table component changes, a blank area will appear.

At this time, full page refresh or partial refresh will come in handy. The following screenshot is an example of the second situation I encountered, which has been solved by using full page refresh and partial refresh:

1. By default, all are selected, and the page renders normally:

2. Check one display column, and the page renders normally:

3. Check the checked display column again, and a blank area will appear:

At this time, you only need to call it in the radio selection method The partial refresh method this.reloadPart() can solve the problem. The same is true for full selection.

4. Every time a new display column is added, a blank area will appear in the table. At this time, we only need to call the full page refresh method this.reload() after the new record is successfully added.

[Related recommendations: "vue.js Tutorial"]

The above is the detailed content of Let me explain in detail how to implement full page or partial refresh in Vue. For more information, please follow other related articles on the PHP Chinese website!