vue3.2 项目刷新当前页面的三种方法

本文介绍了在Vue项目中刷新页面的三种方法:1) 刷新重载;2) 使用空白页面跳转回原页;3) provide/inject配合控制路由视图。避免了瞬间空白页问题,提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:

当点击发布文章后,刷新页面,左侧导航节点也随之刷新.
如图:在这里插入图片描述

实现方案:
  • 第一种:
location. reload()
this.$router.go(0)

这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好.

  • 第二种:新建一个空白页面back.vue,点击确定的时候先跳转到这个空白页,然后再立马跳转回来.
    在这里插入图片描述
    back.vue中的内容:
<template>
	<div></div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
// 跳转至指定页面
router.replace({
	path:"/subook",
	name:"subook"
})
</script>

这个方式,相比第一种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,建议采用第三种.

  • 第三种:provide / inject 组合 方式是我试过最实用的,下面用项目截图给大家说明下:

首先,要修改下你的app.vue. 通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了
isRouterAlive //true or false 来控制

在这里插入图片描述

然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用reload()来调用就行.

在这里插入图片描述
在这里插入图片描述

总结

以上所述就是给大家介绍的vue项目刷新当前页面的三种方法.

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值