VUE重新获取数据无效的情况下 刷新组件
今天在做东西的时候,刚好看到以前写的一段代码。上传完毕之后重新获取数据列表,但是使用的是window.location.reload();刷新,是刷新整个页面,感觉体验比较差。
不知道大家是怎么做的,一般都是重新获取一下数据VUE会自动重新渲染,很方便很舒服。
但是我这里就顺手写了重新获取数据,发现并没有反应,我也懒得去看为什么没有效果,因为项目赶时间就利用了改变<router-view> key的方式来实现刷新。
如下11行:使用emit触发父组件的reloadRouter,改变<router-view>的key
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 this.$axios.post('http://****/Api/Prj/'+_this.dbcMsg.ajaxUrl,fd).then(res => { 2 _this.uploadModelDialogVisible = false; 3 _this.clearSelectFile(); 4 _this.$message({ 5 type: 'success', 6 message: '上传成功', 7 }); 8 setTimeout(()=>{ 9 //_this.getProjectPhaseData 10 //window.location.reload(); 11 _this.$emit('reloadRouter'); 12 },1000); 13 }).catch(res => { 14 console.log(res); 15 });
父组件代码如下
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <router-view :childSetColor = "setColor" :key="setChange" @reloadRouter="reloadRouter"/> 2 3 reloadRouter() { 4 this.setChange = new Date().getTime(); 5 },