Vue刷新当前页面(成功)

Vue刷新当前页面(成功)查了资料一共有三种办法,只试过两种,都成功了,介绍一下。一、直接路由刷新vue自带了刷新的办法this.$router.go(0);但是这个办法会让整个当前页面刷新,相当于F5。如果项目中只是做一个编辑修改操作,希望修改后数据立马改变,但是使用此方法会出现一个短暂的空白页(如下图),用户效果特别不好,不推荐。二、使用provice和inject结合的方法这种方法会局部刷新,不会出现…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

查了资料一共有三种办法,只试过两种,都成功了,介绍一下。

一、直接路由刷新

vue自带了刷新的办法

this.$router.go(0);

但是这个办法会让整个当前页面刷新,相当于F5。如果项目中只是做一个编辑修改操作,希望修改后数据立马改变,但是使用此方法会出现一个短暂的空白页(如下图),用户效果特别不好,不推荐。
在这里插入图片描述

二、使用provice和inject结合的方法

这种方法会局部刷新,不会出现整个页面刷新的效果,非常适合项目中更新操作后的刷新页面。
1.首先找到vue项目中的App.vue,这是根组件,相当于所有*.vue的父组件了,所以在这里去定义reload可以全局使用。

在这里插入图片描述
2.在App.vue中添加刷新代码

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  provide(){
    return{
      reload:this.reload
    }
  },
  data(){
    return{
      isRouterAlive:true
    }
  },
  methods:{
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(function(){
        this.isRouterAlive = true;
      })
    }
  }
}
</script>

在这里插入图片描述这是我的app.vue,大家的可能不一样,不过不影响。

3.然后在需要刷新的子组件页面中添加inject。

export default {
    inject:['reload'],
    data () {
        return {
        ...
        }
    },

在这里插入图片描述
4.最后在刷新页面中需要刷新的地方添加this.reload()方法

this.reload();

在这里插入图片描述

还有一种刷新方法是先进入一个空路由,然后在立马返回,这种方法没什么必要,百度上也有方法详解,所以这里不介绍了,个人认为还是使用provice和inject结合最适合。
希望可以帮助到大家!

一开始嫌麻烦用的是第一种,但是放到项目中的时候实在是影响,体验效果极差,于是果断换了方法!果然还是第二种好用。所以以后不要嫌麻烦……多试试新方法!

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/181300.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 2021-08-20

    2021-08-20福利iTunes12.6.5.3(企业版)下载!发表于:2018-09-2701:22:55来自威锋网页版7.8w326只看楼主本帖最后由扫除一切害人虫于2018-10-3104:24编辑iTunes12.6.5.3(企业版)注:这个版本的iTunes与macOSMojave不兼容。简单介绍一下:这个版本自带应用商店,APP可更新可下载,重刷系统后再也不必使用手机从已购里面一个个下载了。并且这个版本支持XSMAXIOS12.0DFU模式下刷机,可谓是喜欢

  • 在CMD命令行中切换到管理员权限模式「建议收藏」

    在CMD命令行中切换到管理员权限模式「建议收藏」1、打开CMD2、输入:runas/noprofile/user:Administratorcmd3、输入Administrator账户的密码,必须设置密码PS:可以不是Administrator账户,只要是具有管理员权限的账号都可,例如ASUS等。runas/noprofile/user:ASUScmd然后输入ASUS账号的密码run…

    2022年10月16日
  • 从零开始学习java一般需要多长时间?「建议收藏」

    从零开始学习java一般需要多长时间?「建议收藏」其实学java一般要多久?因人而异,例如一个零基础的小白自学java,每天学习8个小时来算,而且在有学习资料的基础上,每天学习,从零到找到工作,起码要半年起步,而且还要有项目经验,否则是不会有公司要你的。而一个有一些基础的人,在经过有人系统的教学后,是可以很快学会掌握java的,大概3个月左右。不过java相对于C,C++java而言,java无疑简单了很多,不需要指针,不需要销毁对象,使得对ja…

  • 分析了10万条B站UP主数据后,我知道了成为百万粉丝UP主的一些秘密「建议收藏」

    分析了10万条B站UP主数据后,我知道了成为百万粉丝UP主的一些秘密「建议收藏」前几天一位好朋友入了B站,问我如何才能成为一名百万粉丝的up主。这不,于是我做了这篇的一些分析,知道了成为百万粉丝up主的一些小秘密。还做了一个昵称生成器,给其昵称起名提供建议。这是她的b站视频截图:关于昵称起名我的想法是这样,是我们把B站这些百万粉丝大佬的昵称分析一下成分构成,根据相关性随机起个名,是不是就有百万粉丝up主昵称的那味了?上面截图是她改名前的昵称,是否会改名,改名后叫什么咱们拭目以待。咱们现在就开始爬取整整:B站up主信息爬取直接通过b站首页去爬是很不方便的,这里我找到了两个第

  • 7个最优秀的手机游戏引擎

    7个最优秀的手机游戏引擎随着智能手机成为主要的游戏平台,移动游戏引擎变得越来越流行。下面将介绍7个最优秀的手机游戏引擎。1.CoronaSDK游戏开发引擎这是一款实用Lua语言作为开发语言的游戏引擎,对我来说比起的其他的游戏引擎要好学一点。而且,Lua语言现在很有游戏开发都有相关的支持。Coronasdk官方网址:https://coronalabs.com/Lua学习网址,最好从菜鸟教程开始http://www.runoob.com/lua/lua-tutorial.htmlCoronaSDK开发欢迎W

  • 3W原则[通俗易懂]

    3W原则[通俗易懂]目的:为了减少走线之间的电磁串扰。两个走线中心间距至少得大于3倍的线宽。用规则进行约束,但是规则用的两线之间的距离是边缘距离。因此规则设置的值应为10.8。(即线宽的两倍10.8=5.4X2)…

发表回复

您的电子邮箱地址不会被公开。

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