广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >Vue3实现刷新页面局部内容的示例代码
  • 574
分享到

Vue3实现刷新页面局部内容的示例代码

Vue3刷新页面局部Vue3局部刷新 2022-09-27 22:09:57 574人浏览 薄情痞子
摘要

目录第一步:定义状态标识第二步、借用v-if 指令让dom节点重新渲染第三步、修改isRouterAlive 值,实现dom的重新渲染想要实现页面的局部刷新,我们只需要实现局部组件(

目录
  • 第一步:定义状态标识
  • 第二步、借用v-if 指令让dom节点重新渲染
  • 第三步、修改isRouterAlive 值,实现dom的重新渲染

想要实现页面的局部刷新,我们只需要实现局部组件(dom)的重新渲染。在Vue中,想要实现这一效果最简便的方式方法就是使用v-if 指令。

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

如下图所示,如何在vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载,并展示对应的加载状态。

在这里插入图片描述

在这里插入图片描述

由于Vue3.X中script setup 语法中组件内守卫只有onBeforeRouteUpdateonBeforeRouteUpdate 两个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实现刷新页面局部内容的示例代码的文章就介绍到这了,更多相关Vue3 刷新页面局部内容内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue3实现刷新页面局部内容的示例代码

本文链接: https://www.lsjlt.com/news/34279.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作