Vue 刷新当前路由方法
问题描述:vue子组件上传图片,上传成功想刷新整个父组件。解决方案:一、一种方法,但是有bug在网上看到了一种方法:试过之后感觉有bug。第一次刷新返回到上个界面了,第二次第三次有是正常的。let NewPage = "_empty" + "?time=" + new Date().getTime() / 500;this.$router.push(NewPage);this.$router.go
·
问题描述: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: '刷新界面' }
},
就实现了当前界面的刷新工作。
更多推荐
已为社区贡献6条内容
所有评论(0)