資訊專欄INFORMATION COLUMN
可以用實現局部組件（dom）的重新渲染可以實現頁面的局部刷新。有一個最簡單辦法，我們可以用Vue中的v-if指令來實現。
我們的思路是：除了上述用Vue中的v-if指令來實現，我們也可以用另一個方法就是新建一個空白組件，需要刷新局部頁面時跳轉至這個空白組件頁面，然后在空白組件內的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>
<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>
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 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 @click="handleCommand('refresh')">刷新</div>
<div @click="handleCommand('closeOther')">
關閉其他
</div>
<div @click="handleCommand('closeLeft')">
關閉左側
</div>
<div @click="handleCommand('closeRight')">
關閉右側
</div>
</el-popover>
</template>
<script setup>
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 scoped>
…… CSS樣式
</style> 上述全部內容，大家多多關注。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127782.html
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
上一節我們簡單的介紹了一下vue3 項目中的計算屬性，這一節我們繼續 vue3 的基礎知識講解?！ ∵@一節我們來說 vue3 的偵聽器?！ W過 vue2 的小伙伴們肯定學習過偵聽器，主要是用來監聽頁面數據或者是路由的變化，來執行相應的操作，在 vue3里面呢，也有偵聽器的用法，功能基本一樣，換湯不換藥的東西。 偵聽器是常用的 Vue API 之一，它用于監聽一個數據并在數據變動時做一些自定義...
本篇文章就是介紹關于vue3集成Element-plus實現按需自動引入組件的相關資料,為了讓大家詳細了解，附有詳細內容?！ lement-plus正是element-ui針對于vue3開發的一個UI組件庫， 它的使用方式和很多其他的組件庫是一樣的，其他類似于ant-design-vue、NaiveUI、VantUI都是差不多的；安裝element-plus 首先下載element-pl...
閱讀 547·2023-03-27 18:33
閱讀 732·2023-03-26 17:27
閱讀 630·2023-03-26 17:14
閱讀 591·2023-03-17 21:13
閱讀 521·2023-03-17 08:28
閱讀 1801·2023-02-27 22:32
閱讀 1292·2023-02-27 22:27
閱讀 2178·2023-01-20 08:28
