在使用Vue开发过程中,有时候修改了一些数据或者提交了表单以后需要刷新当前页面,js中有很多方法都可以刷新页面,但是我觉得都不是很友好,会突然整个页面白了一下,相当于按了F5刷新页面。最近看到了大神们的做法,也实现了一下,感觉挺不错的。
//Vue.app
<template>
<div id="app">
<router-view v-if='isRouterAlive'></router-view>
</div>
</template>
<script>
export default{
name:'app',
provide(){
//父组件中通过provide来提供变量,在子组件中通过inject来注入变量
return { reload:this.reload }
},
data(){
return { isRouterAlive:true //控制视图是否显示的变量 }
},
methods:{
reload(){
this.isRouterAlive = false;//先关闭
this.$nextTick(function(){
this.isRouterAlive = true;//再打开
})
}
}
}
</script>
//组件中引入 Test.vue
<template>
<button @click='refresh'>刷新</button>
</template>
<script>
export default{
inject:['reload'],
data(){
return{}
},
methods:{
refresh(){
this.reload();
}
}
}
</script>