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

这篇文章主要介绍“Vue3如何实现刷新页面局部内容”，在日常操作中，相信很多人在Vue3如何实现刷新页面局部内容问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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如何实现刷新页面局部内容”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！