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>

  

posted @   大桥默默学  阅读(16436)  评论(0编辑  收藏  举报
编辑推荐:
· 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自定义属性
点击右上角即可分享
微信分享提示