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> 

雖然表現形式不同，可是他們的獲取方式都是同樣的。