To achieve partial refresh of the page, we only need to implement the re-rendering of the local component (dom). In Vue, the easiest way to achieve this effect is to use the v-if directive.

In Vue2, in addition to using the v-if command to re-render the local dom, we can also create a new blank component. When we need to refresh the local page, jump to this blank component page, and then In the beforeRouteEnter guard in the blank component, it jumps back to the original page.

How to click the refresh button in Vue3.X to reload the DOM in the red box and display the corresponding loading status? .

Due to the script setup syntax in Vue3. and onBeforeRouteUpdate two APIs, so we use the v-if directive to re-render the local dom to achieve this requirement. Step 1: Define the state identifier

Define a

identifier refresh state in the global state, and re-render based on changes in isRouterAlive. isLoading Identifies the loading status. <pre class='brush:php;toolbar:false;'>import { defineStore } from &amp;#39;pinia&amp;#39; export const useAppStore = defineStore({ id: &amp;#39;app&amp;#39;, state: () =&gt; ({ isRouterAlive: true, isLoading: false } as { isRouterAlive: boolean; isLoading: boolean }) })</pre>The second step, borrow the v-if instruction to re-render the dom node

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

The third step, modify the isRouterAlive value to realize the re-rendering of the 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;)">
      關(guān)閉其他
    </div>
    <div class="arrow-down-item" @click="handleCommand(&#39;closeLeft&#39;)">
      關(guān)閉左側(cè)
    </div>
    <div class="arrow-down-item" @click="handleCommand(&#39;closeRight&#39;)">
      關(guān)閉右側(cè)
    </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 // 設(shè)置為false，卸載dom
    setTimeout(() => { // 此處采用了定時(shí)器，并沒有采用網(wǎng)上比較常見的nextTick
      appStore.isRouterAlive = true // 設(shè)置為true，重新掛載dom
      appStore.isLoading = false // 隱藏?cái)?shù)據(jù)加載狀態(tài)
    }, 500)
  } else if (command === &#39;closeOther&#39;) {
    tabsStore.closeOther()
  } else {
    tabsStore.closeLeftOrRight(command)
  }
}
// ……
</script>

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

The above is the detailed content of How to refresh partial content of the page in Vue3. For more information, please follow other related articles on the PHP Chinese website!