???? ????? ?? ???? ?? ?? ??(dom)? ?? ???? ???? ???. Vue?? ? ??? ?? ?? ?? ??? v-if ???? ???? ????. v-if 指令。

在Vue2中我們除了使用v-if 指令讓局部dom的重新渲染，也可以新建一個空白組件，需要刷新局部頁面時跳轉至這個空白組件頁面，然后在空白組件內的beforeRouteEnter 守衛(wèi)中又跳轉回原來的頁面。

如何在Vue3.X中實現(xiàn)點擊刷新按鈕重新加載紅框內的DOM，并顯示相應的加載狀態(tài)？。

由于Vue3.X中script setup 語法中組件內守衛(wèi)只有onBeforeRouteUpdate 及onBeforeRouteUpdate 兩個API，因此我們來借助v-if 指令使局部dom重新渲染來實現(xiàn)這一需求。

第一步：定義狀態(tài)標識

在全局狀態(tài)中定義一個isRouterAlive 標識刷新狀態(tài)，根據(jù)isRouterAlive 變化來重新渲染。isLoading

Vue2??? v-if ???? ???? ?? DOM? ?? ????? ? ??? ?? ???? ?? ??? ? ? ??? ??? ?? ????. ? ?? ?? ???? ??? ?? ? ?? ??? ?????. beforeRouteEnter ?? ??? ?? ???? ?? ?????.

???? ??? ???? ??? ??? DOM? ?? ???? Vue3.X? ?? ?? ??? ???? ??? ?????? .

????????Vue3.X? ???? ?? ???? onBeforeRouteUpdate? onBeforeRouteUpdate? ? ?? API? ???? v-if? ?????. ???? ? ?? ??? ???? ?? ?? DOM ???? ??????. ????1??: ?? ??? ?? ?????? ???? 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 &#39;./SideMenuView.vue&#39;
import NavMenuView from &#39;./NavMenuView.vue&#39;
import TabsView from &#39;./TabsView.vue&#39;
import { useAppStore } from &#39;@/stores/app&#39;
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(&#39;refresh&#39;)">刷新</div>
    <div class="arrow-down-item" @click="handleCommand(&#39;closeOther&#39;)">
      關閉其他
    </div>
    <div class="arrow-down-item" @click="handleCommand(&#39;closeLeft&#39;)">
      關閉左側
    </div>
    <div class="arrow-down-item" @click="handleCommand(&#39;closeRight&#39;)">
      關閉右側
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { CloseBold, ArrowDownBold } from &#39;@element-plus/icons-vue&#39;
import type { MenuItem } from &#39;@/interface/menu&#39;
import { useMenuRouterStore } from &#39;@/stores/menu-router&#39;
import { useTabsStore } from &#39;@/stores/tabs&#39;
import { useAppStore } from &#39;@/stores/app&#39;
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 === &#39;refresh&#39;) {
    appStore.isLoading = true // 展示數(shù)據(jù)加載狀態(tài)
    appStore.isRouterAlive = false // 設置為false，卸載dom
    setTimeout(() => { // 此處采用了定時器，并沒有采用網(wǎng)上比較常見的nextTick
      appStore.isRouterAlive = true // 設置為true，重新掛載dom
      appStore.isLoading = false // 隱藏數(shù)據(jù)加載狀態(tài)
    }, 500)
  } else if (command === &#39;closeOther&#39;) {
    tabsStore.closeOther()
  } else {
    tabsStore.closeLeftOrRight(command)
  }
}
// ……
</script>

<style lang="scss" scoped>
…… CSS樣式
</style>

? ??? Vue3?? ???? ?? ???? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!