VUE实现局部刷新
可以使用2.2.0 新增的provide / inject控制的显示隐藏
在App.vue文件中添加以下coding:
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
<script>
export default {
name: 'App',
data () {
return {
isRouterAlive: true
}
},
provide () {
return {
reload: this.reload
}
},
methods: {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
<script/>
在使用局部刷新的组件中
<script>
export default {
name: 'Component',
data () {
return {}
},
inject: ['reload'], // 注入
methods: {
callBack(){
// ...
this.reload() //局部刷新
}
}
}
</script>
拓展
其他页面刷新方法:
1.window.location.reload() //有白屏
2.this.$router.go(0) //有白屏