创新实训——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;
    }