问题:使用其他方式刷新当前页面有时会出现一段时间的空白,用户体验不好(利用这些方式来重新加载数据也不好)
provide代码:
//被控制页面
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return {
//方法定义在provide中传给inject
reload: this.reload
}
},
data(){
return {
isRouterAlive: true
}
},
methods:{
//定义刷新方法
reload(){
this.isRouterAlive = false;
this.$nextTick(() => {
this.isRouterAlive = true;
});
}
}
}
</script>
inject代码:
//控制页面
<template>
<!--此处控制刷新-->
<div @click="handleClick"></div>
</template>
<script>
export default {
inject:['reload'],
methods:{
handleClick(){
// 重新加载当前页面
this.reload();
}
}
};
</script>
provide和inject可以跨组件传递变量和方法