vue.js学习笔记（5）— Vue路由传参

以前在用jqery，js写URL传参的时候，经常是这种情况，比如：http://www.baidu.com?id=01&status=02，这种写法虽然也是简单明了，但是在获取的时候也是让人一阵发麻，我要怎样去获取出来对应的id和status的值呢？这个时候就是一大堆的代码上来了，什么window.href，什么indexOf等等，又是分割字符串为数组啊，又是怎么的，反正挺麻烦，不过vue很好的解决了这个问题，那就是路由传参，官方叫法“编程式导航”，具体展示的形式如下：

this.$router.push({
      path: 'IdentifyAuthenticationInfo',
      query: {
        mchtId: this.mchtId,    //this.mchtId=01
        mchtType: this.mchtType //this.mchtType=02
      }
})                

这里路由的展示形式就是 IdentifyAuthenticationInfo?mchtId=01&mchtType=02，展示的形式是一模一样的，但是他的获取形式更简单，只需要在对应页面的路由通过 this.$route获取就行了，比如要获取mchtId的值就是，this.$route.query.mchtId，依次类推；当然还有另外一种表现形式，就是通过 <router-link/>标签，比如：

<router-link class="" :to = "{path:'/AccountRules',query:{rules:'01'}}">
                    <p>hello world</p>
                    <div>
                       <img src="../../../../static/img/Group7@2x.png"/>
                    </div>
                </router-link> 

虽然表现形式不一样，但是他们的获取方式都是一样的。