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

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

在Vue2中我们除了使用v-if 指令让局部dom的重新渲染，也可以新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的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节点重新渲染

第三步、修改isRouterAlive 值，实现dom的重新渲染

到此这篇关于Vue3实现刷新页面局部内容的示例代码的文章就介绍到这了,更多相关Vue3 刷新页面局部内容内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！