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

这篇具有很好参考价值的文章主要介绍了Vue强制刷新页面重新加载数据方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

业务场景

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

实现原理
就是通过控制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://www.toymoban.com/news/detail-503154.html

到了这里,关于Vue强制刷新页面重新加载数据方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ✝️ 强制 Vue 重新渲染组件的正确方法

    有时 Vue 的 reactivity 不符合需求,你需要重新渲染一个组件,或者可能只是想remove当前的 DOM 并 re-render。那么如何让 Vue 以 正确的方式重新加载组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置一个 :key 。当需要重新渲染组件时,只需更改键的值,Vue 就会重新渲染组

    2024年02月07日
    浏览(38)
  • 清除引入js缓存,vue切换页面重新加载

    require引入的js require.cache删除js缓存

    2024年02月16日
    浏览(41)
  • 【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法

    目录 一、Vue监控路由 1、Vue中watch监控路由 2、Vue中watch监控路由的某一个参数 3、Vue中watch同时监控多个路由 二、刷新当前页面数据 1、location.reload 2、$router.go(0) 3、this.$router.resolve()与this.$router.resolve() a、this.$router.resolve() b、this.$router.push() 三、示例场景 四、往期相关优质推荐

    2024年02月08日
    浏览(41)
  • vue项目关于iframe嵌套的页面,在切换tab标签时会被重新刷新的问题处理方案

    这两天工作中遇到一个这样的需求,切换tab标签时,要求对应的tab页面不刷新,但是项目中加入了一部分含有iframe的页面,在切换路由的过程中,如果使用keep-alive是达不到缓存ifram嵌套的页面效果的。 vue中的keep-alive 1.原理:vue 的缓存机制并 不是直接存储 DOM 结构 ,而是将

    2024年02月04日
    浏览(45)
  • 小程序赖加载刷新数据页面数据堆叠问题debug

      目录 项目所需 原生写赖加载存在的bug 解决问题思路及代码实现 思路: 代码实现: 列表.wxml  列表.js Wenjain_shanchu.js Wenjain_shanchu.json Wenjain_shanchu.wxml shouye.js  ⭐️ 好书推荐 【内容简介】  某高校大一新生入学,学校的综合服务站小程序上传文件的列表支撑前端页面支撑不

    2024年02月08日
    浏览(25)
  • 浏览器刷新页面,缓存的处理方式,强制刷新

    刷新页面的缓存处理的方式对比 地址栏回车/直接访问 URL 保留强缓存,保留协商缓存,走正常请求流程 点击浏览器刷新按钮 忽略强缓存,保留协商缓存 按f5【command + r】 忽略强缓存,保留协商缓存 ctrl + f5 【command + shift + r 】 忽略强缓存,忽略协商缓存,从服务器端请求最

    2024年02月02日
    浏览(32)
  • Angular 我在点击了上一页或者下一页方法之后,重新加载渲染数据。为什么还需要再点击一次页面的其他地方才会渲染出来?

    在你的 TypeScript 代码中,当调用 nextPage_TopSelling() 或 prevPage_TopSelling() 方法时,虽然你更新了 currentPage_TopSelling 的值并调用了 reloadTopSelling() 方法,但是 Angular 并不会自动检测到这些变化并重新渲染页面。这是因为 Angular 的变化检测机制是基于异步的,在一些情况下需要手动触

    2024年03月12日
    浏览(42)
  • Vue刷新当前页面的方法

    在做项目的过程中会遇到很多需要重新刷新页面的地方,比如说弹出的登陆框,在登陆成功后要关闭弹窗,并且刷新页面,那么,有哪几种好用的方式来进行页面的刷新呢。 第一种,就是是新建一个空白的页面,跳转到改页面,然后再立马跳转回原页面,但是这个方式很显然

    2024年02月12日
    浏览(38)
  • Vue页面刷新常用的4种方法

    Vue项目里,有时候我们需要刷新页面,重新加载页面数据,常用方法如下: 使用 location.reload() 方法可以简单地实现当前页面的刷新,这个方法会重新加载当前页面,类似于用户点击浏览器的刷新按钮。 在 Vue 中,可以将该方法绑定到 Vue 实例上,比如在 Vue 的 methods 中添加如

    2024年02月12日
    浏览(28)
  • 【Vue】实现当前页面刷新的四种方法

    这两周在写一个后台管理,每次调用接口实现增删改查的过程中,都需要刷新当前页面或者刷新数据。如果手动点击浏览器的小圈圈不仅麻烦、用户体验感极差,而且不会真的有人让用户手动刷新叭。。。这个问题可以称得上是前端的bug了。那么,顺着这个问题,一通搜寻下

    2023年04月26日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包