刷新当前页面

最新推荐文章于 2024-10-16 08:37:49 发布

原创最新推荐文章于 2024-10-16 08:37:49 发布 · 536 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #刷新页面

前端小技巧专栏收录该内容

3 篇文章

订阅专栏

一, reload 直接刷新页面

window.location.reload();
$router.go(0);

相当于按了 F5, 因此缺点也很明显, 体验感不佳, 因为要加载所有页面资源相对较慢, 比较耗时.

二, Vue Router 刷新当前页面

这个时候, 我们通过 $router.push 一个 refresh 路由的形式实现, 具体步骤如下:

创建一个vue文件

<template>
<div></div>
</template>
<script setup>
beforeRouteEnter(to, from, next) {
	next(vm => {vm.$router.replace(from.fullPath);});
}
</script>

在你的路由文件中, 配置上述文件路由, 示例代码:
routes 数组中直接添加就行]

{
	path: '/refresh',
	name: 'refresh',
	component: () => import('步骤一中创建文件的路径')
},

在目标位置, 使用 $router.push 上述路由即可, 示例代码:

$router.push({name: 'refresh'});

三, 依赖注入方式实现 (即, provide/inject )

中心思想: 通过 v-if 来切换 router-view 的显示/隐藏从而实现重新加载组件的目的. 步骤如下.

修改路由出口文件 ( 我测试时是在 App.vue 文件中加的 ), 通过 provide 提供一个刷新方法给后代组件.

注意: 我的Demo中没有测试路由嵌套的场景, 如果你是路由嵌套, 只想刷新嵌套的子路由, 那在这一步修改的就应该是子路由出口文件.

核心代码：

<template>
	<div id="app">
		<!-- <router-view></router-view> -->
		<router-view v-if="isRefreshFlag"></router-view>
	</div>
</template>
<script setup>
import { ref, nextTick, provide } from "vue";

const isRefreshFlag = ref(true)
function reloadPage() {
	isRefreshFlag.value = false;
	nextTick(() => {isRefreshFlag.value = true})
}
provide("reloadPage", reloadPage)</script>

后台管理平台Geeker项目刷新（只刷新嵌套的子路由）
Main.vue

// 注入刷新页面方法
<template>
	<router-view v-slot="{ Component, route }">
	 	<component :is="createComponentWrapper(Component, route)" v-if="isRouterShow" :key="route.fullPath" />
	</<router-view>   
</template>
<script setup lang="ts">
	const isRouterShow = ref(true);
	const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);
	provide("refresh", refreshCurrentPage);
</script>

tab.vue
refresh按钮

<script setup lang="ts">
// refresh current page
const refreshCurrentPage: Function = inject("refresh") as Function;
const refresh = () => {
  setTimeout(() => {
    route.meta.isKeepAlive && keepAliveStore.removeKeepAliveName(route.fullPath as string);
    refreshCurrentPage(false);
    nextTick(() => {
      route.meta.isKeepAlive && keepAliveStore.addKeepAliveName(route.fullPath as string);
      refreshCurrentPage(true);
    });
  }, 0);
};
</script>