解决Vue刷新页面白屏问题
在Vue中通常会使用this.$router.go(0)
来刷新当前页,但是用这样的方式会出现白屏,而且体验不是很好,那有没有更优雅的方式呢?
有的!
在App.vue
中,修改template
的router-view
<template>
<router-view v-if="reload"></router-view>
</template>
修改script
部分
export default {
name: 'app',
provide() { //父组件中通过provide来提供变量,在子组件中通过inject来注入变量。
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive: true //控制视图是否显示的变量
}
},
methods: {
reload() {
this.isRouterAlive = false //先关闭
this.$nextTick(() => {
this.isRouterAlive = true //再打开
})
}
}
使用方法
export default {
name: 'test',
inject: ['reload'],
data() {
return {}
},
methods: {
refresh() {
this.reload()
}
}
}