Vue 刷新当前路由方法

大家好，欢迎来到IT知识分享网。

问题描述：vue子组件上传图片，上传成功想刷新整个父组件。

解决方案：

一、一种方法，但是有bug

在网上看到了一种方法：试过之后感觉有bug。第一次刷新返回到上个界面了，第二次第三次有是正常的。

let NewPage = "_empty" + "?time=" + new Date().getTime() / 500;
this.$router.push(NewPage);
this.$router.go(-1);

整体意思是：图片上传成功后，先跳转到一个新界面，然后回退到当前界面。就实现了刷新。但实际应用似乎是有些问题。

二、于是又找了一种方法：

this.$router.replace({path: ‘/refresh’});

新建一个refresh.vue
// 空页面，负责中转到目标页面

<template>
  <div></div>
</template>
 
<script>
export default {
  name: 'refresh',
  data () {
    return {
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.$router.replace(from.path)
    })
  }
}
 
</script>
<style scoped>
</style>

from.path为需要刷新页面的地址。
为什么要用replace而不用push呢，因为push假如刷新成功后点返回会回到refresh页面，replace可以避免这个问题。
在router/index.js添加这个路由

{
        path: '/refresh', 
        name: 'refresh',
        component: () =>
            import('../view/my-online/refresh.vue'),
        meta: { title: '刷新界面' }
    },

就实现了当前界面的刷新工作。