第一种:直接整个页面重新刷新
location.reload()
this.$router.go(0)
以上两种都可以刷新当前页面,缺点是相当于按 ctrl+F5 强制刷新的效果,整个页面重新加载,会出现一个瞬间的空白页面,体验不怎么好
第二种:provide + inject 组合方式
首先,要修改下你的App.vue文件,通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载(isRouterAlive(true or false)来控制)如图:
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default {
name: 'App',
provide() {
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(function() {
this.isRouterAlive = true
})
}
}
}
</script>
然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用 this.reload 来调用就行,如图:
export default {
inject: ['reload'],
methods: {
reset() {
this.reload()
}
}
}