vue3中刷新当前页面的三种方法
<div @click="kannoFn">kanno</div>
1.location.reload(),缺点:刷新时会页面闪白
function kannoFn(){
location.reload()
}
2.history.go(0),缺点:刷新时会页面闪白
function kannoFn(){
history.go(0)
}
效果
3.通过组件通信方式,不会出现闪白
在App.vue中
// 在App.vue中
import { provide,nextTick } from 'vue'
const isRouterActive = ref(true)
provide('reload', () => {
isRouterActive.value = false
nextTick(() => {
isRouterActive.value = true
})
})
在需要刷新的页面中
<div class="circle" @click="updateFun">刷新</div>
import { inject } from 'vue';
const reload = inject("reload");
const updateFun = () => {
reload();
};
效果