- 强制刷新整个页面
- 使用v-if
- 使用组件内置的forceUpdate方法
- 使用key-changing优化组件
1、强制刷新整个页面
this.$router.go(0);
window.location.reload();
2、使用v-if
<template>
<div v-if="show">xxx</div>
<el-button @click="refresh()">强制刷新</el-button>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
refresh() {
this.show = false;
this.$nextTick(() => {
this.show = true;
});
}
}
}
</script>
3、使用组件内置的forceUpdate方法
<template>
<div>xxx</div>
<el-button @click="refresh()">强制刷新</el-button>
</template>
<script>
export default {
data() {
return {}
},
methods: {
refresh() {
this.$forceUpdate();
}
}
}
</script>
4、使用key-changing优化组件
<template>
<div :key="key>xxx</div>
<el-button @click="refresh()">强制刷新</el-button>
</template>
<script>
export default {
data() {
return {
key: 1
}
},
methods: {
refresh() {
this.key++;
}
}
}
</script>