1. When dealing with lists, there is often a requirement to delete a piece of data or to refresh the current page after adding data. 2. Problems encountered

  1. Vue-router is rerouted to the current page without refreshing the page

2. When window.reload() or router.go(0) is used, the whole browser is reloaded, flashing and the experience is not good 3. Provide/inject: Allows an ancestor component to inject a dependency to all of its descendants, regardless of component level, and remains in effect as long as the upstream/downstream relationship is established. App.vue: Declare the reload method to control the display or hiding of the router-view, thus controlling the reloading of the page

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

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

Inject the Reload dependencies provided by the app.vue component on the page, and after the logic is done (remove or add…) To refresh the current page, call this.reload() directly.

<template> <el-button v-show="showreturn" class="returnBtn" plain icon="el-icon-arrow-left" </el-button> </template> <script> export default {inject:["reload"], methods: { backmap() { this.reload(); } } } </script>Copy the code

4. Provide: The option should be an object or a function that returns an object. This object contains properties that can be injected into its descendants. Inject: an array of strings, or an object whose key is the local binding name. Provide and inject binding are not responsive. This is intentional. If you pass in a listening object, the object’s properties are still responsive.