vue3 实现刷新当前页面

用这种方法可以实现,但效果很差,白屏时间很长,自己试一下就知道了。

location.reload()

那么我们怎么做呢,别着急,马上看重点

首先去我们的App.vue里面(以下只显示此功能相关代码)

import { provide, ref, nextTick } from 'vue'
const isRouteActive = ref(true);
provide('reload', ()=>{
	isRouteActive.value = false;
	nextTick(()=>{
		isRouteActive.value = true;
	})
})

<template>
	<route-view v-slot="{component}" v-if="isRouteActive">
		<keep-alive>
		 	<Component :is="component">
		</keep-alive>
	</route-view>
</template>

然后去我们需要刷新的页面

import { inject } from 'vue'
consr reload = infect('inject);

// 下面这行代码写在你需要reload的地方
reload();

这种效果很完美,试下就知道了~

另外:这两种,我试了都没有效果,不清楚为什么,有大佬知道的话,还望不吝赐教!

instance.proxy.$forceUpdate(); // 没用
router.go(0);  // 没用
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐