Summary of five methods for Vue to realize the refresh of the current page

The following are several methods to implement the refresh of the current page in Vue:

Method 1: Use $(0) method

Re-navigation through Vue Router allows local refresh of the page without losing the global state. There are two specific implementation methods:

Implementation code:

<template>
  <div>
    <button @click="refreshPage">Refresh Page</button>
  </div>
</template>

<script>
export default {
  methods: {
    refreshPage() {
      this.$(0);
    }
  }
};
</script>

Code explanation: 

• this.$(0)The method will reload the current page. It actually takes advantage of the browser's history.go(0)It means that it does not move forward or backward, but the current page will be reloaded, which is equivalent to refresh.

Method 2: Use the() method

use()It is the easiest and most direct way. It will completely reload the current page, similar to the browser

Refresh button. The implementation method is as follows:

Implementation code:

<template>
  <div>
    <button @click="refreshPage">Refresh Page</button>
  </div>
</template>

<script>
export default {
  methods: {
    refreshPage() {
      ();
    }
  }
};
</script>

Code explanation: 

• ()It is a native method of JavaScript that forces the current page to be reloaded. It re-requests the page resource from the server, rather than reading from the cache.

advantage:

• Simple implementation and small code.
• Ability to completely refresh the page, ensuring all data and status are reset.

shortcoming:

• This will cause the page to reload and the user experience is poor.
• All states and data are lost and are not suitable for scenarios where some states need to be retained.

Method 3: Use the key attribute of Vue routing

Implementation code: 

<template>
  <router-view :key="$"></router-view>
</template>

<script>
export default {
  name: 'App',
  watch: {
    '$route' (to, from) {
      // You can add some logic, such as updating data according to routing changes    }
  }
};
</script>

Code explanation: 

• existrouter-viewAdd on:key="$"Attributes, when$routeWhen there is a change, it will be re-renderedrouter-viewComponents to achieve refresh effect.
• Every time the route changes,$The value of   will change, which will cause Vue to thinkrouter-viewis a new component, thus recreating it.

Method 4: Use Vue’s v-if directive

Implementation code:

<template>
  <div>
    <button @click="refreshComponent">Refresh Component</button>
    <component-to-refresh v-if="showComponent"></component-to-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showComponent: true
    };
  },
  methods: {
    refreshComponent() {
       = false;
      this.$nextTick(() => {
         = true;
      });
    }
  }
};
</script>

Code explanation:

• First, usev-ifInstructions to control the display and hiding of components.
• When clickedrefreshComponentWhen the button isshowComponentSet tofalse, this destroys the component.
• Then use$nextTick()After ensuring that the DOM update is completed, theshowComponentReset totrue, recreate the component to achieve the refresh effect.

advantage:

• You can accurately control the parts that need to be refreshed to improve performance.
• The user experience is good and will not cause the full page to refresh.

shortcoming:

• The implementation is complex and requires a deep understanding of Vue's responsive principle.
• Not applicable for scenarios where global refresh or state reset is required.

Method 5: Manually trigger component re-rendering

By manually triggering the re-render of the component, a more fine-grained refresh can be achieved. There are several specific methods:

1. Use the key attribute to force component to re-render

data() {
  return {
    componentKey: 0
  };
},
methods: {
  refreshComponent() {
     += 1;
  }
}

Use in templateskeyproperty:

<template>
  <YourComponent :key="componentKey" />
</template>

Summarize:

• $(0): Using the routing history mechanism, it is relatively simple, but there will be a short white screen because it involves reloading of the page.
• (): Directly calling the browser's refresh function will also have a brief white screen and will re-request server resources.
• use router-view of key property: The page can be refreshed according to route changes, which is suitable for refreshing the page during route switching, and can be combined with routing guards and other mechanisms.
• usev-ifInstructions: More suitable for refreshing individual components, avoiding overall reload of the page, may be better in performance, suitable for needsPartial refreshThe situation.

You can choose the appropriate refresh method according to the specific application scenario and performance requirements. For example, if you need to refresh the entire page and reload the resource, you can use();If you only need to refresh a single component, you can usev-ifDirective; if you want to use routing changes to refresh the page, you can userouter-viewofkeyAttributes; if you want simple page refresh without considering performance details, you can use$(0)

This is the end of this article about the five methods of Vue to refresh the current page. For more information about the current page refresh method of Vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!