vue3中刷新当前页面的三种方法

三种方法"/>

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 = falsenextTick(() => {isRouterActive.value = true})
})

在需要刷新的页面中

<div class="circle" @click="updateFun">刷新</div>import { inject } from 'vue';const reload = inject("reload");
const updateFun = () => {reload();
};

效果