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

推荐使用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()
}
})
}
}
}

希望大佬看到有不对的地方，提出博主予以改正！