zoukankan      html  css  js  c++  java
  • vue项目中返回之前页面数据不刷新的问题

    利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的

    这个就属于vue的数据获取问题

    解决办法是将数据获取封装到一个函数中,然后created钩子函数中调用这个函数,再在watch选项中设置监听路由的变化,通过不同的路由变化来确定是否需要重新获取数据

    如代码

    //先在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"
     },

    //另外,如果多个数据需要获取,可以采用将watch写成数组的形式,之前不知道要写成数组的形式,后面的覆盖了前面写的。造成一些bug。多个数据获取就写成如下的
    watch:{
        '$route':["fetchData","clear"]
     },

      

  • 相关阅读:
    图片轮播
    swoole 内存泄露的问题有没有好的办法解决
    学习Swoole需要掌握哪些基础知识
    通过SSH通道来访问MySQL
    redis常见应用场景
    Redis 消息队列的实现
    PHP-Curl模拟HTTPS请求
    代码重构方向原则指导
    win8.1系统相关
    SQL Server 学习系列之六
  • 原文地址:https://www.cnblogs.com/qqfontofweb/p/8980223.html
Copyright © 2011-2022 走看看