vue 页面刷新的问题和解决

首先上代码：

delete(id){
  console.log(id);
  let data = {id: id};
  let data1 = Qs.stringify(data);
  this.$axios.post(
    'http://localhost:8083/delete',
    data1
  ).then(function (res) {
    console.log(res.data);
    //this.reload();  //1 在这里刷新一直出错

  }).catch(function (error) {
    console.log(error);
  })
    this.reload();                 //2
},

我执行刷新的代码在1的地方一直提示报错，后来我又单独写了刷新方法，就执行

this.reload();  这个代码刷新成功，然后我把这个代码放到2位置刷新成功。具体原因尚不清仓。

下面是我的代码 app.vue 代码：

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <router-view v-if="isRouterAlive"></router-view>

  </div>
</template>

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

然后是调用页面需要的代码 比如 aa.vue 页面要调用则需要

export default {
  name: "One",
  inject:['reload'], // 这句代码必须加上，否则报错
  data() {
    return {
      isRouterAlive: true,
      name: '',
      address: '',
      age: '',
      data2: []

    }
  },

然后可以直接在页面使用 ：

this.reload();

可以愉快的写代码了。