vue刷新页面时只让部分组件刷新,vue刷新页面的方法
本文主要介绍了Vue3实现刷新页面局部内容的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
目录
第一步：定义状态标识第二步、借用控制显示指令让数字正射影像图节点重新渲染第三步、修改isRouterAlive值，实现数字正射影像图的重新渲染想要实现页面的局部刷新，我们只需要实现局部组件(dom)的重新渲染。在某视频剪辑软件中，想要实现这一效果最简便的方式方法就是使用控制显示指令。
在Vue2中我们除了使用控制显示指令让局部数字正射影像图的重新渲染，也可以新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的在路由器中心之前守卫中又跳转回原来的页面。
如下图所示，如何在Vue3 .X中实现点击刷新按钮实现红框范围内的数字正射影像图重新加载，并展示对应的加载状态。
由于Vue3 .X中脚本设置语法中组件内守卫只有onBeforeRouteUpdate及onBeforeRouteUpdate两个API，因此我们来借助控制显示指令使局部数字正射影像图重新渲染来实现这一需求。
第一步：定义状态标识
在全局状态中定义一个isRouterAlive标识刷新状态，根据isRouterAlive变化来重新渲染正在装载。标识加载状态。
从“皮尼亚”导入{ defineStore }
export const use app store=defineStore({
id:"应用程序",
状态：()=
({
isRouterAlive:没错，
isLoading: false
} as { isRouterAlive:boolean；isLoading: boolean })
})
第二步、借用v-if 指令让dom节点重新渲染
模板
div class=公共布局
埃尔容器
侧菜单视图：collapse= is collapse /侧菜单视图
埃尔容器
NavMenuView v-model:collapse= is collapse /NavMenuView
TabsView/TabsView
！-核心开始-
埃尔梅因
v-loading=appStore.isLoading
element-loading-text=页面加载中……
元素-加载-背景=rgba(0，0，0，0.8)
路由器视图v-if=应用商店。isrouteralive /路由器视图
/el-main
！-核心结束-
电子页脚/电子页脚
/El-容器
/El-容器
/div
/模板
脚本安装语言=ts
从导入侧面菜单视图./SideMenuView.vue
从导入NavMenuView ./NavMenuView.vue
从""导入选项卡视图./TabsView.vue
从" @/商店/应用程序"导入{ useAppStore }
const appStore=useAppStore()
const isCollapse=ref(false)
/脚本
样式lang=scss 范围
…… CSS样式
/风格
第三步、修改isRouterAlive 值，实现dom的重新渲染
模板
差异
制表符-项目光标-指针向下箭头
ref=buttonRef
@click=onClickOutside
el图标箭头向下粗体//el图标
/div
埃尔-波普沃
ref=popoverRef
触发器=悬停
虚拟触发
:virtual-ref=buttonRef
div class= arrow-down-item @ click= handle命令( refresh )刷新/div
div class= arrow-down-item @ click= handle command( close other )
关闭其他
/div
div class= arrow-down-item @ click= handle command( close left )
关闭左侧
/div
处理命令( closeRight )
关闭右侧
/div
/el-popover
/模板
脚本安装语言=ts
从" @element-plus/icons-vue "导入{ CloseBold，ArrowDownBold }
从"@/界面/菜单"导入{ MenuItem }类型
从" @/商店/菜单-路由器"导入{ useMenuRouterStore }
从" @/商店/标签"导入{ useTabsStore }
从" @/商店/应用程序"导入{ useAppStore }
const router=useRouter()
const menuRouterStore=useMenuRouterStore()
const tabsStore=useTabsStore()
const appStore=useAppStore()
//制表符功能操作
const buttonRef=ref()
const popoverRef=ref()
const onClickOutside=()={
popoverRef .波普瑞夫？德雷希德？()
}
const handleCommand=(命令：字符串)={
if (command===refresh) {
store . is loading=true//显示数据加载状态
app . isrouteralive=false//设置为false可卸载dom。
这里用的是SetTimeout(()={//Timer，没有用网上常见的nextTick。
store . isrouteralive=true//设置为true以重新装载dom。
store . is loading=false//隐藏数据加载状态
}, 500)
} else if(command=== close other ){
tabs store . close ther()
}否则{
tabsStore.closeLeftOrRight(命令)
}
}
//……
/脚本
style lang=scss 范围
…… CSS样式
/风格
这就是这篇关于Vue3刷新页面部分内容的示例代码。更多相关Vue3刷新页面的部分内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。