广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

想要实现页面的局部刷新，我们只需要实现局部组件（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 })})

<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>

<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如何实现刷新页面局部内容的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~