当前位置：

首页 > 编程开发 > Vue3如何实现刷新页面局部内容

Vue3如何实现刷新页面局部内容

作者：小宇宙叶知秋时间：2025-05-13 来源：正软商城浏览：3

想要实现页面的局部刷新，我们只需要实现局部组件（dom）的重新渲染。在Vue中，想要实现这一效果最简便的方式方法就是使用v-if指令。在Vue2中我们除了使用v-if指令让局部dom的重新渲染，也可以新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的beforeRouteEnter守卫中又跳转回原来的页面。如下图所示，如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载，并展示对应的加载状态。由于Vue3.X中scriptsetup语法中组件内守卫只有onBefo

本文目录

想要实现页面的局部刷新，我们只需要实现局部组件（dom）的重新渲染。在Vue中，想要实现这一效果最简便的方式方法就是使用v-if 指令。

在Vue2中我们除了使用v-if 指令让局部dom的重新渲染，也可以新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的beforeRouteEnter 守卫中又跳转回原来的页面。

如下图所示，如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载，并展示对应的加载状态。

Vue3如何实现刷新页面局部内容

由于Vue3.X中script setup 语法中组件内守卫只有onBeforeRouteUpdate 及onBeforeRouteUpdate 两个API，因此我们来借助v-if 指令使局部dom重新渲染来实现这一需求。

第一步：定义状态标识

在全局状态中定义一个isRouterAlive 标识刷新状态，根据isRouterAlive 变化来重新渲染。isLoading 标识加载状态。

import { defineStore } from 'pinia'
export const useAppStore = defineStore({
  id: 'app',
  state: () =>
    ({
      isRouterAlive: true,
      isLoading: false
    } as { isRouterAlive: boolean; isLoading: boolean })
})

第二步、借用v-if 指令让dom节点重新渲染




import SideMenuView from './SideMenuView.vue'
import NavMenuView from './NavMenuView.vue'
import TabsView from './TabsView.vue'
import { useAppStore } from '@/stores/app'
const appStore = useAppStore()
const isCollapse = ref(false)



…… CSS样式

第三步、修改isRouterAlive 值，实现dom的重新渲染




import { CloseBold, ArrowDownBold } from '@element-plus/icons-vue'
import type { MenuItem } from '@/interface/menu'
import { useMenuRouterStore } from '@/stores/menu-router'
import { useTabsStore } from '@/stores/tabs'
import { useAppStore } from '@/stores/app'
const router = useRouter()
const menuRouterStore = useMenuRouterStore()
const tabsStore = useTabsStore()
const appStore = useAppStore()
// tabs功能操作
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
const handleCommand = (command: string) => {
  if (command === 'refresh') {
    appStore.isLoading = true // 展示数据加载状态
    appStore.isRouterAlive = false // 设置为false，卸载dom
    setTimeout(() => { // 此处采用了定时器，并没有采用网上比较常见的nextTick
      appStore.isRouterAlive = true // 设置为true，重新挂载dom
      appStore.isLoading = false // 隐藏数据加载状态
    }, 500)
  } else if (command === 'closeOther') {
    tabsStore.closeOther()
  } else {
    tabsStore.closeLeftOrRight(command)
  }
}
// ……



…… CSS样式

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系bd@zhengruan.com

作者最新文章

笔趣阁在线阅读免费无弹窗小说网站入口教程 2026-11-05 08:38

Excel单元格内换行教程：Alt+Enter快捷键与自动换行设置 2026-10-30 18:49

3DMax材质贴图浏览器怎么打开 2026-10-29 12:08

blender几何节点功能怎么开启教程界面入口与启用步骤 2026-10-18 13:20

PDF删页删错怎么找回？PDF删页报参数错误怎么办？ 2026-10-17 11:21

编程开发 Vue3

上一篇： Java 函数泛型在集合框架中的应用

下一篇：垃圾回收在Go语言中的作用

相关文章更多

pinia数据持久化的步骤详解与插件配置教程

详解Pinia数据持久化的实现步骤，包括手动订阅状态、封装通用插件及处理序列化例外，帮助开发者构建稳定的前端状态存储方案。

2026-10-29 8 DreamView

Vue3 数据持久化

如何从零开始搭建vue3项目

说明记录一次Vue3的项目搭建过程。文章基于vue3.2.6和vite2.51版本，使用了ui库Elementplus，vue-router4，Layout布局封装，axios请求封装，别名配置等。开始1.使用vscode开发工具安装vue3的插件Volar，在vue2中我们使用的是Vetur。vue3在线code工具传送门sfc.vuejs.org/2.执行初始化及安装命令：npminitvite初始化vite此过程可以输入项目名、选择vue/react项目及js/ts环境选择，vue3已经完全支持ts

2025-07-05 6 BrightSoul

vue3中getCurrentInstance怎么使用

父组件中：1.setup语法糖中导入子组件2.在子组件标签上绑定ref值3.setup内部从vue中按需导出getCurrentInstance方法4.调用getCurrentInstance方法导出proxy5.通过proxy.$refs.子组件ref名.子组件内属性/方法实现调用子组件count+1import{getCurrentInstance,ComponetInternalInstance,ref}from"vue";importChildfrom"./zi.vue";constchild=r

2025-06-02 2 小宇宙叶知秋

怎么使用vue3搭建后台系统

首先使用npm或者yarn创建一个vue项目//使用npm创建一个基于vite构建的vue项目npmcreatevite@latest//使用yarn创建一个基于vite构建的vue项目yarncreatevite@latest在创建的构成中选择vuevue-ts创建完之后将项目拖到编译器打开一、配置vite在vite.config.ts文件中配置项目的服务数据，配置如下：//此处配置项目服务参数server:{host:"0.0.0.0",//项目运行地址，此处代表localhostport:8888,

2025-05-28 3 RainLight

Vue3基于countUp.js怎么实现数字滚动的插件

countUp简介CountUp.js是一种无依赖项的轻量级JavaScript类，可用于快速创建以更有趣的方式显示数字数据的动画。CountUp可以在两个方向上进行计数，具体取决于传递的开始和结束值。虽然现在市面上基于countUp.js二次封装的Vue组件不在少数，但我个人是不太喜欢使用这些第三方封装的，因为第三方组件的更新频率很难保证，也许作者只是一时兴起封装上传了，并未打算继续维护，如果使用了等于后续根本没有维护性了，所以这种二次封装我推荐自行实现，我们可以通过本次封装熟悉一下vue3,ts的语法

2025-05-25 2 NorthPath

vue3中addRoute路由变化但页面未更新如何解决

解决办法，每次addRoute时深复制组件对象importtimefrom"../views/time"functioncopyObj(obj){if(typeofobj=="object"){if(Array.isArray(obj)){letarr=[];for(letitemofobj){arr.push(Object.assign(copyObj(item)));}returnarr;}elseif(obj==null){returnnull;}else{letobj1={};for(letind

2025-05-24 3 小月亮

怎么将Vue3 Axios拦截器封装成request文件

1、创建一个名为request.js的新文件，并导入Axios：importaxiosfrom'axios';2、创建一个名为request的函数，并将其导出：这将创建一个名为request的函数，并将其设置为具有基本URL的新的Axios实例。要在封装的Axios实例中添加超时设置，可以在创建Axios实例时传递timeout选项。exportconstrequest=axios.create({baseURL:'https://example.com/api',time

2025-05-20 6 OpenWorld

axios Vue3

Vue3侦听器的实现原理是什么

侦听响应式对象前面我们聊到计算属性，它可以自动计算并缓存响应式数据的值。而如果我们仅需要在响应式数据变化时，执行一些预设的操作，就可以使用watch侦听器。我们还是先来实现一个最简单的例子，然后来一点一点扩充它。constdata={foo:1}constobj=reactive(data)watch(obj,()=>{console.log('obj已改变')})在这个例子中，我们使用了watch侦听器，当obj的属性被改变时，控制台应该会打印出obj已改变。基于前面我们对计算属性的实现

2025-05-17 3 SunnyJourney

vue3中的createApp怎么使用

函数定义createApp函数定义在文件packages/runtime-dom/src/index.ts中exportconstcreateApp=((...args)=>{constapp=ensureRenderer().createApp(...args)if(__DEV__){injectNativeTagCheck(app)injectCompilerOptionsCheck(app)}const{mount}=appapp.mount=(containerOrSelector:Element

2025-05-16 3 小月亮

vue3中＜script setup＞和setup函数的区别是什么

是在单文件组件(SFC)中使用组合式API的编译时语法糖。当同时使用SFC与组合式API时该语法是默认推荐。相比于普通的语法，它具有更多优势：更少的样板内容，更简洁的代码。能够使用纯TypeScript声明props和自定义事件。更好的运行时性能(其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。更好的IDE类型推导性能(减少了语言服务器从代码中抽取类型的工作)。以上是vue3官网对的说明，其实＜scriptsetup＞就是setup函数的一个语法糖。一、基本语法setup函数的写法im

2025-05-15 8 若安舟已远

热门文章更多

Photoshop蒙版换证件照背景颜色怎么改？实用操作步骤详解 AutoCAD绘制机械零件三维实体详细教程 AE教程书籍挑选指南：零基础、动效与合成方向实战标准 Photoshop图层合并快捷键是什么？合并盖印及分开图层方法 Photoshop日系调色教程：小清新风格参数与思路

精品专题更多

装机必备

正软商城装机必备专区，精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件，帮助用户快速完成新电脑软件配置。

Windows

正软商城Windows软件专区，汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件，提供软件介绍、系统要求、正版授权及购买下载服务。

PDF教程

正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法，同时介绍常用PDF软件和工具的使用技巧。