vue刷新当前页面

我们经常遇到此种情形，当新增编辑完成后，需要重新刷新页面数据，重新调用接口较多时，挨个调用过于繁琐；甚至可能遇到跨组件调用的问题，毫无疑问，处理起来有些许费力，本文就将如何处理这种情况可用方案进行总结：

方案一：整页刷新–不推荐

实现

location.reload() 
this.$router.go(0) 

优点

1.代码简单，仅需一行代码即可实现效果；
2.便于理解，相当于重新加载一遍系统；

缺点

相当于按ctrl+F5 强制刷新，整个页面将重新加载，故而加载速度慢，会出现一个瞬间的空白页面，体验感不好。

方案二：路由跳转当前页面–不推荐

实现

1.当前页面增加页面跳转

this.$router.replace({
  path: this.$route.path,
  query: {
    routeKey: new Date().getTime()
  }
})

2.监听当前页面路由变化

watch: {
  '$route'(newVal) {
    if(newVal.query.routeKey) {
      // 调用需变更的方法
    }
  }
}

优点

代码简单；

缺点

1.地址栏会变化，多增加参数；
2.只适用于第二种情况，跨组件；
3.代码不可重复性利用；

方案三：路由跳转–比较推荐

实现

1.当前页面增加页面跳转

this.$router.replace({
  path: '/centerPage',
  query: {to:this.$route.path}
})

2.增加中间页面

<template>
 <div class='centerPage'></div>
</template>
 
<script>
export default {
  name: "centerPage",
  methods: {
    jump() {
      let url = this.$route.query.to
      this.$router.replace(url)
    }
  },
  created() {
   this.jump()
  }
}
</script>

优点

1.不会像方案一样有长时间的白屏；
2.多个需求需要时，可重复使用；

缺点

可以在地址栏看到路由切换的过程；

方案四：provide / inject组合–最为推荐

provide/inject 是 Vue 在 2.2.0 版本新增的 API；
provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。

实现

1.修改app.vue

<template>
  <div id="app">
    <router-view v-if='isRouterAlive'/>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data() {
    return{
      isRouterAlive: true // 控制页面显隐
    }
  },
  provide() {
    return{
      reload: this.reload
    }
  },
  methods: {
    reload(){
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

2.当前页面调用

<template>
 <div class='currentPage'></div>
</template>
 
<script>
export default {
  name: "currentPage",
  inject: ['reload'], // 引用
  methods: {
    submit() {
      this.reload() // 调用
    }
  }
}
</script>

优点

1.不会像方案一样有长时间的白屏，三个方案中渲染速度最快；
2.多个需求需要时，可重复使用；
3.不会在地址栏看到路由切换的过程；