问题描述: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: '刷新界面' }
    },

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

Logo

前往低代码交流专区

更多推荐