vue项目中返回之前页面数据不刷新的问题
利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的
这个就属于vue的数据获取问题
解决办法是将数据获取封装到一个函数中,然后created钩子函数中调用这个函数,再在watch选项中设置监听路由的变化,通过不同的路由变化来确定是否需要重新获取数据
如代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | //先在methods里封装获取数据的方法 methods:{ clear(){ localStorage.removeItem( 'userills' ); }, fetchData(){ this .illness = []; let xuhaonum = localStorage.getItem( 'nums' ); let xuhao = xuhaonum.replace(/\d+/g, '' ); let _this = this ; axios.get(url+ '?xuhao=' +xuhao).then( function (res){ console.log(res); let condition = res.data.data.zhengzhuang; let len = condition.length; for ( let i = 0;i<len;i++){ let items = { key: '' , value: '' , flag: '' } items.value = condition[i].sName; items.key = condition[i].sID; items.flag = condition[i].nFlag; _this.illness.push(items); //这里要构造key = sname value = 下一个页面的参数 } }). catch ( function (err){ _this.showerror = !_this.showerror; }) }, }, //然后在create中调用 created(){ this .fetchData(); this .clear(); }, //利用watch来监视路由的变化来确定是否要再次获取数据 watch:{ '$route' : "fetchData" },<br><br> //另外,如果多个数据需要获取,可以采用将watch写成数组的形式,之前不知道要写成数组的形式,后面的覆盖了前面写的。造成一些bug。多个数据获取就写成如下的watch:{ '$route' :[ "fetchData" , "clear" ] },<br> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
2017-05-02 关于websocket 的原理与应用
2017-05-02 关于data自定义属性