vue 从A页面跳到B页面添加数据，从B页面返回上一页（A页面）时实时刷新A页面的数据（返回上一页刷新数据）

A页面（在activated中写需要刷新的数据的接口）

第一种方法

 data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
    }
  }, 
methods: {
   //查询数据的方法
    getAuthList() {
      this.$ajax.get('/admin/roles', { page: this.page, pageSize: this.pageSize, roleName: this.inputItem.roleName }, res => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.pagination.total)
        }
      })
    }
  },
  mounted() {
//进入页面时调用方法查询数据
    this.getAuthList()
  },
  // 从下一页面返回本页面时刷新接口数据
  activated() {
    this.getAuthList()
  },
}

第二种方法 

 data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
    }
  }, 
methods: {
   //查询数据的方法
    getAuthList() {
      this.$ajax.get('/admin/roles', { page: this.page, pageSize: this.pageSize, roleName: this.inputItem.roleName }, res => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.pagination.total)
        }
      })
    }
  },
  mounted() {
//进入页面时调用方法查询数据
    this.getAuthList()
//从下一页回到此页面时调用的方法
   let _this = this;
    document.addEventListener("visibilitychange", function () {
      if (document.visibilityState === "visible") {
        _this.getAuthList()
      }
    });
  },

}

B页面

html：

 <div @click="returnPage">返回上一页</div>

js：

methods: {
   //查询数据的方法
 returnPage() {
      this.$router.go(-1)
    }
  },