使用provide/inject实现vue刷新当前页面

转载

mb5fd340813ba80 2021-07-30 15:02:00

推荐使用provide/inject组合实现刷新的原因在于刷新页面的不会出现瞬间的空白页面，用户体验良好。

　　1、修改App.vue页面

<template>
  <div id="app">
    <router-view v-if="isRouterActive"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterActive: true
    }
  },
  methods: {
    /**
     * 重新渲染页面
     * @date 2021-07-30
     */
    reload () {
      this.isRouterActive = false
      this.$nextTick(() => {
        this.isRouterActive = true
      })
    }
  }
}
</script>

　　2、在需要刷新的页面注入在App.vue提供(provide)的reload依赖，直接使用this.reload来刷新。

import {
    getDetails
} from '@/api/order'
export default {
  name: 'ShoppingDetails',
  provide: ['reload'],
  data() {
    return {}
  },
  watch: {
    $route() {
      if (this.$router.query.id) {
        this.getData(this.$router.query.id)
      }
    }
  },
  mounted() {
    this.handleData(this.$router.query.id)
  },
  methods: {
    /**
     * 获取数据
     * @date 2021-07-23
     * @param {Object} data
     */
    getData(id) {
       getDetails(id).then((res) => {
          if (res.code === 200) {
             this.list = res.data.list
             this.reload()
          }
       })
    }
  }
}