window.reload()/router.go(0):
采用window.reload(),或者router.go(0)刷新时,整个浏览器重新加载,闪烁。严重影响体验
provide / inject:
允许一个祖先组件向其所有子孙注入一个依赖,关系建立时间里始终生效
App.vue
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
</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>
声明reload,控制router-view的隐藏显示
index.vue
页面用inject注入reload方法
name: 'Deal',
components: { pagination, crudOperation, rrOperation, udOperation, billWayForm, sfbillWayForm, approval, approvalInfo },
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
//重点看这里
inject: ['reload'],
//重点看这里
data() {
}
reBack(finBillNo) {
this.$confirm('此操作将执行撤回, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(() => {
toReback(finBillNo).then(res => {
// console.log(res)
this.$message({
type: 'success',
message: '撤回成功!'
})
//
//像这样直接reload引用即可
//
this.reload()
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消撤回'
})
})
},