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"]
 },