Vue强制刷新页面重新加载数据方法

Vue强制刷新页面重新加载数据方法就是通过控制 router view 的显示与隐藏 来重渲染路由区域 重而达到页面刷新的效果 show flase show 在管理后台执行完增删改查的操作之后 需要重新加载页面刷新数据以便页面数据的更新 1 首先在我们的根组件 APP vue 里面 写入刷新方法 路由初始状态是显示的 2 在需要调用的子组件中引用 需要先用 方法 然后在需要的地方调用

业务场景

在管理后台执行完增删改查的操作之后,需要重新加载页面刷新数据以便页面数据的更新

实现原理
就是通过控制router-view 的显示与隐藏,来重渲染路由区域,重而达到页面刷新的效果,show -> flase -> show

具体代码

1.首先在我们的根组件APP.vue里面,写入刷新方法,路由初始状态是显示的

<template> <div > <el-container class="wrap"> <el-header> <headers></headers> </el-header> <el-main> //if判断状态 <router-view v-if="isRouterAlive"></router-view> </el-main> </el-container> </div> </template> <script> import headers from "../components/headers.vue" export default { //刷新方法 provide(){ return{ reload:this.reload } }, data(){ return{ isRouterAlive:true } }, methods:{ //解决页面刷新,重新渲染数据 reload(){ this.isRouterAlive=false; this.$nextTick(()=>{ this.isRouterAlive=true }) } }, }; </script>

 2.在需要调用的子组件中引用,需要先用inject先注入reload方法,然后在需要的地方调用this.reload()

Vue强制刷新页面重新加载数据方法

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/231810.html原文链接:https://javaforall.net

(0)
上一篇 2025年11月20日 上午8:01
下一篇 2025年11月20日 上午8:22


相关推荐

  • 教授就是大学[通俗易懂]

    教授就是大学[通俗易懂]教授就是大学有一则广为流传的关于艾森豪威尔将军的故事。话说家喻户晓的二战英雄艾森豪威尔将军在1952年接受了哥伦比亚大学的聘请,担任这家著名常青藤大学的校长。上任伊始,将军在下属的陪同下巡视校园,会见校董会、行政人员和学生,最后参加了学校教授为他举行的欢迎大家。在一阵热烈的掌声之后,将军致辞。他首先谦恭地对有机会会见在场的全体哥伦比亚大学的“雇员”们表示万分的荣幸。这时,只见哥大德高望重的物理

    2026年4月18日
    5
  • Win32 API 常量定义(四)

    PublicConstMIXER_OBJECTF_HMIDIOUT=(MIXER_OBJECTF_HANDLEOrMIXER_OBJECTF_MIDIOUT)PublicConstMIXER_OBJECTF_MIDIIN=&H40000000PublicConstMIXER_OBJECTF_HMIDIIN=(MIXER_OBJECTF_HANDLEOrMIX

    2022年4月8日
    88
  • 数据库–关于truncate和delete的区别

    数据库–关于truncate和delete的区别数据库 关于 truncate 和 delete 的区别 1 truncate 删除表中的内容 不删除表结构 释放空间 2 delete 删除内容 不删除表结构 但不释放空间 3 区别 3 1 内存空间 truncate 删除数据后重新写数据会从 1 开始 而 delete 删除数据后只会从删除前的最后一行续写 内存空间上 truncate 省空间 3 2 处理速度因为 truncate 是直接从 1 开始 即全部清空开始 而 delete 需要先得到当前行数 从而进行续写 所以 truncate 删除速

    2026年3月17日
    1
  • 字典树的数据结构_数据结构快速排序

    字典树的数据结构_数据结构快速排序本文主要包括以下内容:Trie字典树的基本概念Trie字典树的基本操作插入查找前缀查询删除基于链表的Trie字典树Set性能对比LeetCode相关线段树的问题LeetCode第208号问题LeetCode第211号问题LeetCode第677号问题Trie字典树的基本概念上一篇我们介绍了线段树(SegmentTree),本文主要介绍Trie字典树…

    2025年9月25日
    4
  • App-Charle抓包配置(https)

    App-Charle抓包配置(https)Mac 下好用的 HTTP HTTPS 抓包工具 Charle 到官网 http www charlesproxy com 下载最新版本 Charles 若不支持 rMBP retinaMacboo 可拖到 Retinizer 中把文字变清晰 HTTP 抓包打开 Charles 程序查看 Mac 电脑的 IP 地址 如 192 168 1 7 打开 iOS 设置 进入当前 wifi 连接

    2026年3月17日
    2
  • c#Parallel.ForEach控制线程数量

    c#Parallel.ForEach控制线程数量List<int>listI=newList<int>();for(inti=0;i<1000;i++){listI.Add(i);}ParallelOptionsoptions=newParallelOptions();option..

    2022年7月19日
    19

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号