Vue3에서 페이지의 일부 콘텐츠를 새로 고치는 방법

페이지를 부분적으로 새로 고치려면 로컬 구성 요소(dom)의 다시 렌더링만 구현하면 됩니다. Vue에서 이 효과를 얻는 가장 쉬운 방법은 v-if 지시어를 사용하는 것입니다. v-if 指令。

在Vue2中我们除了使用v-if 指令让局部dom的重新渲染，也可以新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的beforeRouteEnter 守卫中又跳转回原来的页面。

如何在Vue3.X中实现点击刷新按钮重新加载红框内的DOM，并显示相应的加载状态？。

由于Vue3.X中script setup 语法中组件内守卫只有onBeforeRouteUpdate 及onBeforeRouteUpdate 两个API，因此我们来借助v-if 指令使局部dom重新渲染来实现这一需求。

第一步：定义状态标识

在全局状态中定义一个isRouterAlive 标识刷新状态，根据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 // 展示数据加载状态
    appStore.isRouterAlive = false // 设置为false，卸载dom
    setTimeout(() => { // 此处采用了定时器，并没有采用网上比较常见的nextTick
      appStore.isRouterAlive = true // 设置为true，重新挂载dom
      appStore.isLoading = false // 隐藏数据加载状态
    }, 500)
  } else if (command === &#39;closeOther&#39;) {
    tabsStore.closeOther()
  } else {
    tabsStore.closeLeftOrRight(command)
  }
}
// ……
</script>

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

위 내용은 Vue3에서 페이지의 일부 콘텐츠를 새로 고치는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!