采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好,在vue中可以使用provide/inject组合,允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
在App.vue组件中的代码:
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
provide () {
return{
reload: this.reload
}
},
data () {
return{
isRouterAlive: true
}
},
methods:{
reload() {
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
}
}
}
</script>
在其他组件中使用:
<template>
<el-tooltip effect="dark" content="刷新" placement="bottom-start">
<el-button class="el-icon-refresh" type="primary" size="small" @click="refresh"></el-button>
</el-tooltip>
</template>
<script>
export default {
name: 'datafilemanage',
inject: ['reload'],
methods:{
refresh() {
this.reload()
}
}
}
这样在其他组件中点击刷新按钮时,就会刷新当前页面。