Vue项目增、删、改、查刷新当前页面

记录下自己做Vue项目遇到问题的解决方法

Vue中使用provide / inject 组合刷新当前页
1.打开App.vue
声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载

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

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

2.在页面注入App.vue组件提供（provide）的 reload 依赖，并在方法中调用

export default {
  inject:['reload'],    //在页面注入App.vue组件提供（provide）的 reload 依赖
  methods: {
   // 新增确定按钮
   async add() {
      this.addDialog = false;
      this.reload()   //在方法中调用
    },
  }
}

完成