在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如何实现刷新页面局部内容的详细内容。