Vue刷新当前页面（成功）

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

一、直接路由刷新

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.cn/181300.html原文链接：https://javaforall.cn