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

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

1 this.$router.push({
2       path: 'IdentifyAuthenticationInfo',
3       query: {
4         mchtId: this.mchtId,    //this.mchtId=01
5         mchtType: this.mchtType //this.mchtType=02
6       }
7 })                

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

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

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