在项目中处理中,常常有需要删除或更新数据之后刷新当前页面的需求
一般页面刷新使用 router.go(0) 或者window.reload()等刷新时,整个浏览器进行重新加载,闪烁,出现白屏状态,用户体验很差。
处理方法
provide / inject 组合
作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
App.vue:
声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
name: "App",
provide() {
return {
reload: this.reload,
};
},
data() {
return {
isRouterAlive: true,
};
},
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true;
});
},
},
};
</script>
然后在你需要刷新的页面中调用this.reload的组件添加inject属性
export default {
inject:['reload'],
data() {
return {
}
}
}
最后在你相应的方法中调用
this.reload()