Vue3实现刷新页面局部内容的示例代码
想要实现页面的局部刷新,我们只需要实现局部组件(dom)的重新渲染。在Vue中,想要实现这一效果最简便的方式方法就是使用v-if
指令。
在Vue2中我们除了使用v-if
指令让局部dom的重新渲染,也可以新建一个空白组件,需要刷新局部页面时跳转至这个空白组件页面,然后在空白组件内的beforeRouteEnter
守卫中又跳转回原来的页面。
如下图所示,如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载,并展示对应的加载状态。
由于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节点重新渲染
<template> <div class="common-layout"> <el-container> <SideMenuView :collapse="isCollapse"></SideMenuView> <el-container> <NavMenuView v-model:collapse="isCollapse"></NavMenuView> <TabsView></TabsView> <!--核心 start--> <el-main v-loading="appStore.isLoading" element-loading-text="页面加载中……" element-loading-background="rgba(0, 0, 0, 0.8)" > <router-view v-if="appStore.isRouterAlive"> </router-view> </el-main> <!--核心 end--> <el-footer>Footer</el-footer> </el-container> </el-container> </div> </template> <script setup lang="ts"> 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) </script> <style lang="scss" scoped> …… CSS样式 </style>
第三步、修改isRouterAlive 值,实现dom的重新渲染
<template> <div class="tabs-item cursor-pointer arrow-down" ref="buttonRef" @click="onClickOutside" > <el-icon><ArrowDownBold /></el-icon> </div> <el-popover ref="popoverRef" trigger="hover" virtual-triggering :virtual-ref="buttonRef" > <div class="arrow-down-item" @click="handleCommand('refresh')">刷新</div> <div class="arrow-down-item" @click="handleCommand('closeOther')"> 关闭其他 </div> <div class="arrow-down-item" @click="handleCommand('closeLeft')"> 关闭左侧 </div> <div class="arrow-down-item" @click="handleCommand('closeRight')"> 关闭右侧 </div> </el-popover> </template> <script setup lang="ts"> 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) } } // …… </script> <style lang="scss" scoped> …… CSS样式 </style>
到此这篇关于Vue3实现刷新页面局部内容的示例代码的文章就介绍到这了,更多相关Vue3 刷新页面局部内容内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/qq_16221009/article/details/125753427
相关文章
php无刷新利用iframe实现页面无刷新上传文件(1/2)
利用form表单的target属性和iframe 一、上传文件的一个php教程方法。 该方法接受一个$file参数,该参数为从客户端获取的$_files变量,返回重新命名后的文件名,如果上传失...2016-11-25jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
这篇文章将使用jQuery,并结合PHP,将Fckeditor发布的内容进行分页,并且实现无刷新切换页面。 本文假设你是WEB开发人员,掌握了jQuery和PHP相关知识,并且熟知Fckeditor的配置和使用。...2015-10-23- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要介绍了解决vue刷新页面以后丢失store的数据问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- 这篇文章主要介绍了解决vuex数据页面刷新后初始化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
- 这篇文章主要介绍了java后台实现js关闭本页面,父页面指定跳转或刷新操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 本文就是和大家分享一款由php结合ajax实现的无刷新留言板,先给大家看一下最后的效果图:数据库连接代码如下: <?php$conn = @mysql_connect("localhost","root","root") or die ("MySql连接错误");mysql_select_db("d...2015-10-30
- 这篇文章主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下...2016-01-08
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍了vue实现在进行增删改操作后刷新页面,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
- 这篇文章主要介绍了Vue 中获取当前时间并实时刷新,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-13
- 这篇文章主要介绍了C#实现刷新桌面的方法,涉及C#基于shell32.dll动态链接库实现系统桌面刷新的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 代码很简单,实现的功能却很实用,直接奉上代码CSS:复制代码 代码如下: <meta charset="utf-8" /> <title>Pull to Refresh</title> <meta name="viewport" content="width=device-width,height=device-height,inital-scal...2015-03-15
- 这篇文章主要介绍了Springboot使用thymeleaf动态模板实现刷新,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-08-31
- 在日常项目开发中我们经常见到下拉刷新上拉加载的功能,接下来通过本文给大家介绍ionic如何实现下拉刷新与上拉加载的相关资料,需要的朋友可以参考下...2016-06-12
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26