使用 Vue 选项/组合 Api provide / inject Api 地址,此方法可以实现无感刷新并且不会出现闪烁的空白。
- 首先在根组件 App.vue 定义这个方法
<template>
<div id="app">
<router-view v-if="routerAlive"></router-view>
</div>
</template>
javascript
复制代码
export default {
//暴露 reload 这个方法,方便组件调用
provide() {
return {
reload: this.reload,
}
},
data() {
return { routerAlive: true }
},
methods: {
//重新加载的方法
reload() {
this.routerAlive = false
this.$nextTick(function () {
this.routerAlive = true
})
},
},
}
- 这样就可以在你要刷新的页面组件调用这个方法
export default {
inject: ["reload"],
......
methods:{
handleReload(){
//在你要用到的地方调用这个重新刷新的方法
this.reload()
}
}
}
- 最后如果不考虑用户体验的话,也可以用下面的方法:
// 1.window.location.reload()应该是刷新.相当于 按页面刷新按钮
window.location.reload()
标签:Vue,javascript,reload,刷新,无感,页面
From: https://www.cnblogs.com/clwydjgs/p/17548576.html