Detailed explanation of active refresh page and refresh method after Vue list data is deleted

Time:2021-12-2

Problem Description:

After the front end deletes a piece of data or adds new data, the back end operation succeeds, but the front end will not refresh automatically. You need to refresh the current page again
(use Vue router to reroute to the current page. The page will not be refreshed. When window. Reload() or router. Go (0) is used to refresh, the whole browser will be reloaded)

solve:

Provide / inject combination

Function: allow an ancestor component to inject a dependency into all its descendants, no matter how deep the component level is, and it will always take effect when the upstream and downstream relationship is established.

(declare the reload method to control the display or hiding of router view, so as to control the reload of the page)

App.vue Code:


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

  </div>
</template>

<script>
export default {
  name: 'App',
   components: {},
  provide(){
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true,
    };
  },
  cread() {},
  methods: {
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(function(){
        this.isRouterAlive = true;
      })
    }
  },
  mounted() {
  },
}
</script>

<style>
</style>

Usage:

//Reference Vue reload method
  inject: ['reload'],


// call in method
      this.reload()

Always go better and farther when you are young, so as to live up to yourself and the firmness behind you! come on.

summary

This is the end of this article about the active refresh page and refresh method after Vue list data is deleted. For more relevant refresh content after Vue list data is deleted, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!