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