創新實訓——009

本片博客中我要介紹之前提到的Vue.js（以下簡稱vue）中的watch方法，並且介紹一下關於特殊字符的轉義問題和頁面跳轉傳參。

watch

watch方法可以監視某個值是否發生變化，如果該值發生變化了，就可以做出對應的操作，這一點是很實用的，比如有一個點擊事件，當我點擊不同的值時，在watch方法的監視下就可以對此做出不同的變化。
watch既可以監視一個值，也可以監視多個值，下方舉例。

監視一個值

舉例如下：

watch:{
      //在這裏監視的是logPara這個值
      logPara:{
        handler:function(newVal,oldVal){
        //會記錄舊值和新值
          if(newVal){
            //做出對應的操作
          }
        }
      }
    }

監視多個值

舉例如下：

//這裏我們要監視的值是logKind和logPara
//首先需要配合computed方法，將多個值組裝爲一個對象
computed:{
      logParaData(){
        const {logKind,logPara}=this
        return{
          logKind,
          logPara
        }
      }
    }
//然後watch監視的是該對象的值
watch:{
      logParaData:{
        handler:function(newVal,oldVal){
          if(newVal){
            //這裏做變化後的對應操作
            //以newVal.logKind和newVal.logPara來訪問對象中的值
          }
        }
      }
    }

轉義問題

因爲我們做的是一個日誌監測系統，而日誌中有一部分是訪問資源url，這一部分中會涉及一些特殊字符，例如這一個：

裏面有+號和%號等，就會被轉義，+號會變爲空格，%號會被轉爲相關字符，這咋辦呢？在網上找了各種資料，一開始以爲是請求時會自動轉義的問題，但是沒找到相關解決辦法，後來在小組同學的提醒下可能是編碼問題，一開始我對整個請求url利用encodeURI函數進行編碼，這樣會導致請求無法分清get參數，所以需要對請求參數進行單獨編碼，如下所示：
var url='http:127.0.0.1/test?id='+encodeURI(url)發現百分號的問題可以解決了，但是+號仍然會被轉爲空格，如下所示：

這個時候因爲：

選自W3School：
不會對 ASCII 字母和數字進行編碼，也不會對這些 ASCII 標點符號進行編碼： - _ . ! ~ * ' ( ) 。
該方法的目的是對 URI 進行完整的編碼，因此對以下在 URI 中具有特殊含義的 ASCII 標點符號，encodeURI() 函數是不會進行轉義的：;/?:@&=+$,#

所以需要換一個函數，換爲encodeURIComponent函數就可以了。

頁面跳轉傳參

在本項目中有這樣一個需求：點擊日誌表中的IP會跳轉到IP詳情頁，並且詳情頁顯示該IP的具體信息。
我們在這裏可以使用傳統的<a>標籤來進行跳轉並傳參，具體過程如下：

<!--將IP以<a>標籤方式在頁面中顯現
href爲要跳轉的頁面，及跳轉參數，寫法如下
-->
<a :href="['#/ipPage?ip='+props.row.ip]" style="color:#fff">{{ props.row.ip }}</a>
<!--在ipPage頁以下述方式獲取傳來的參數-->
mounted(){
      var para=this.getIPFromUrl()
      console.log(para)
      if(para!="no"){
        this.logPara=para['ip']
      }
  },
  methods:{
    getIPFromUrl(){
      //從其他頁面跳轉到本頁面時需進行判斷
      var url=location.href;
      var i=url.indexOf('?');
      if(i==-1)return "no";
      var querystr=url.substr(i+1);
      var arr1=querystr.split('&');
      var arr2=new Object();
      for  (i in arr1){
          var ta=arr1[i].split('=');
          arr2[ta[0]]=ta[1];
      }
      return arr2;
    }