vue中使用provide实现reload()

<template>
  <div id="app" style="width: 100%; height: 100%">
    <div v-if="login === true" style="width: 100%; height: 100%">
      <router-view v-if="isRouterAlive"/>
    </div>
    <div v-else>loading...</div>
  </div>
</template>

<script>
import $request from './request/api'
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      login: false,
      username: '',
      isRouterAlive: true
    }
  },
  async created () {
    const resp = await $request.me()
    if (resp.status !== 200) {
      this.$message({
        message: '系统错误',
        type: 'error'
      })
      return
    }
    this.login = true
    this.username = resp.data.username
  },

  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>