功能简介：
1、主页面路径mainpage、添加界面路径addpage
2、默认显示全部tab，只有一个添加按钮
3、点击添加按钮，跳转到添加界面，添加新数据后，返回原界面，新添加的数据即时显示出来
关键点：
1、利用缓存存储新添加数据的创建时间、专家类型
2、当路由变化时，判断缓存数据是否变化，变化则触发下拉刷新事件；否则，不进行任何操作
实现步骤：
1、在添加界面，点击提交按钮时，存储添加数据的创建时间、专家类型
/** 提交 */doSubmit(){//判断数据是否为空......axios({//后端接口......}).then((res)=>{let _this = this;if(res.data.result===1){// 时间、专家类型组成一个新对象，存在session中let newdata = { id: Date.now(), havedatatype:_this.formData.haveEvent }sessionStorage.setItem("havedatatype", JSON.stringify(newdata));showAlert("添加成功！","提示",function(){_this.$router.go(-1);//返回原界面});}else{Toast("添加失败");}}).catch(err =>{Toast('未获取到接口数据！');})},
2、mainpage界面使用hasAddFlag存储缓存数据
data() {return {hasAddFlag:{}//记录缓存数据}}
3、监听路由变化
watch: {// 监听,当路由从添加界面返回到全部界面时，获取缓存中的数据$route: {handler: function(val, oldVal){if(val.name==="mainpage"&&oldVal.name==="addpage"){this.hasAddFlag=JSON.parse(sessionStorage.getItem("havedatatype")||'{}')}},},},
4、监听缓存数据变化
//监听缓存数据变化,如果新值和旧值一致，则不做处理；否则表示有新添加的数据，界面及时刷新hasAddFlag(newVal,oldVal){if(newVal.id===oldVal.id &&newVal.havedatatype===oldVal.havedatatype ){return}// 不管新添加的是专家还是普通人员，全部tab下数据均刷新；而专家tab只有新增专家才刷新this.pullingDown();if(newVal.havedatatype===1){//专家this.pullingDown2();}}
如果觉得《VUE-从添加界面返回原页面时 新增数据自动刷新 使用监听路由来实现监听缓存数据》对你有帮助，请点赞、收藏，并留下你的观点哦！
