Vue强制刷新页面重新加载数据方法

业务场景

在管理后台执行完增删改查的操作之后，需要重新加载页面刷新数据以便页面数据的更新

实现原理
就是通过控制router-view 的显示与隐藏，来重渲染路由区域，重而达到页面刷新的效果，show -> flase -> show

具体代码

1.首先在我们的根组件APP.vue里面,写入刷新方法，路由初始状态是显示的

<template>
  <div >
    <el-container class="wrap">
      <el-header>
        <headers></headers>
      </el-header>
      <el-main>
        //if判断状态
        <router-view v-if="isRouterAlive"></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import headers from "../components/headers.vue"
export default {
  //刷新方法
  provide(){
    return{
      reload:this.reload
    }
  },
  data(){
    return{
      isRouterAlive:true
    }
  },
  methods:{
    //解决页面刷新，重新渲染数据
    reload(){
      this.isRouterAlive=false;
      this.$nextTick(()=>{
        this.isRouterAlive=true
      })
    }
  },
};
</script>

 2.在需要调用的子组件中引用，需要先用inject先注入reload方法,然后在需要的地方调用this.reload()