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结合最适合。
希望可以帮助到大家!

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

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • MySql jdbc autoReconnect 的应用[通俗易懂]

    MySql jdbc autoReconnect 的应用[通俗易懂]http://dev.mysql.com/doc/connector-j/en/connector-j-reference-configuration-properties.html

    2022年7月17日
    9
  • matlab secant method

    matlab secant method

    2021年12月16日
    45
  • 液压油报关_液压油算是危险品吗

    液压油报关_液压油算是危险品吗  韩国液压油进口代理报关知识整理  液压油就是我们利用液体压力能的液压控制系统可以使用的液压介质,在液压技术系统中起着能量信息传递、抗磨、系统进行润滑、防腐、防锈、冷却等作用。对于液压油,首先要满足液压装置在工作温度和启动温度下的液体粘度要求,因为润滑油的粘度变化直接关系到液压作用、传动效率和传动精度,还要求润滑油的粘温性能和剪切稳定性能满足不同用途的需要。液压油的种类繁多,分类管理方法各异,长期发展以来,习惯以用途可以进行垃圾分类,也有学生根据不同油品类型、化学组分或可燃性分类的。这些分类方法只反

    2022年9月21日
    0
  • redis的过期时间设置和过期删除机制「建议收藏」

    redis的过期时间设置和过期删除机制「建议收藏」一:设置过期时间redis有四种命令可以用于设置键的生存时间和过期时间:EXPIRE&lt;KEY&gt;&lt;TTL&gt;:将键的生存时间设为ttl秒PEXPIRE&lt;KEY&gt;&lt;TTL&gt;:将键的生存时间设为ttl毫秒EXPIREAT&lt;KEY&gt;&lt;timestamp&gt;:将键的过期时间设…

    2022年9月26日
    0
  • JMESPath_pathparam注解

    JMESPath_pathparam注解前言JMESPath是JSON的查询语言。您可以从JSON文档中提取和转换元素官方文档:https://jmespath.org/tutorial.html基本表达式JMESPath用的最多的

    2022年8月6日
    9
  • Matlab画图常用的线条符号、颜色

    Matlab画图常用的线条符号、颜色线型说明标记符说明颜色说明-实线(默认)+加号符r红色–双划线o空心圆g绿色:虚线*星号b蓝色:.点划线.实心圆c青绿色x叉号符m洋红色s(square)正方形y黄色d菱形k黑色^上三角形w白色v下三角形&gt;右三角形&lt;左三角形p(pentagram)五角星h(hexagram)六边形square正方形pentagram…

    2022年6月12日
    343

发表回复

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

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