第一部分: vue-router參數傳遞
通過router-link我們可以向路由到的組件傳遞參數，這在我們實際使用中時非常重要的。
路由：
{ path:"/DetailPage", component: DetailPage, name: "詳情頁" },
router-link:
<router-link :to="{path: '/DetailPage', query: {index: index}}"> <div class="item-img">
<p>路由<p> </div> </router-link>
DetailPage頁面：
<p>{{$route.query.index}}</p>
即： 在DetailPage頁面我們可以通過$route.query.index 來獲取到router-link中的值，因為router-link使用的時v-bind:，所以我們傳遞的index: index中的值index是可以變化的，即動態傳遞。
這樣的結果是在路由切換時，在url中出現查詢字符串即 localhost:8080/#/DetailPage?index=0
這是在template中獲取，如果需要在js中獲取，使用 this.$route.query.index 即可獲取。
如下：
<router-link :to="{path: '/commodity/payment/editAddress', query: { id: item.id, name: item.name, contact: item.contact, address: item.address }}"> <div class="address-info"> <div class="name-contact"> <span class="name">{{item.name}}</span> <span class="contact">{{item.contact}} </span> </div> <div class="address">{{item.address}}</div> </div> </router-link>
即通過查詢字符串，我們可以傳遞很多信息。
在js中的使用如下：
export default { data: function () { return { name: this.$route.query.name, contact: this.$route.query.contact, address: this.$route.query.address } },
第二部分： 編程式導航
在vue-router中單獨介紹了編程式導航，之前看了文檔，不知道其作用是什么，但是在實際項目中遇到了問題，所以才又發現他的作用，這里特地記錄。
背景： 用戶在修改收貨地址頁面點擊，修改完成之后，頁面不動！ 必須要手動返回，所以，這時就需要路由了。
方法如下：
this.editAddress(editedAddress).then(function () { alert("修改成功！"); that.$router.go(-1); });
即： 在editAddress，定義在actions中的方法（返回一個promise），當resolve的時候，就alert成功，然后使用this.$router.go(-1)，即返回上一個頁面。
這里使用that，是因為在之前我賦值 var that = this 在內部獲取this獲取不到，會報錯，需要注意。
首先我們看看什么是編程式導航。
也就是說，當我們使用 router-link 連接時，相當於調用了 router.push() ， 即將訪問頁面、路由看做是入棧，在點擊返回按鈕時，就是出棧，這樣就很好理解了。
router.push()的參數可以是一個字符串，也可以是一個描述地址的對象：
// 字符串 router.push('home') // 對象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 帶查詢參數，變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
注意：在傳遞參數/值方面， 使用router.push({path: '', query: ""});這種形式來傳遞值是非常方便的。
router.replace()
和router.push()不同，使用router.push()會將一個訪問記錄push到url中，所以再退回了的時候一定會回到這里，而router.replace()不是添加一個新的進入，而是替換棧頂元素，這樣，在返回的時候，就會返回到棧頂元素的下面一個。
router.go()
這個方法的參數是一個整數，即前進或后退路由的多少步，類似於window.history.go(n)。 舉例如下：
// 在瀏覽器記錄中前進一步，等同於 history.forward() router.go(1) // 后退一步記錄，等同於 history.back() router.go(-1) // 前進 3 步記錄 router.go(3) // 如果 history 記錄不夠用，那就默默地失敗唄 router.go(-100) router.go(100)
第三部分： 坑
我們知道，在一般的.vue文件中， this指向的時Vue實例，所以我們可以使用this.$router等方法，但是在store下的js文件中，this指向的就是我們普通所說的this了，所以使用this.$router一定是會出錯的，所以之前一直不知道怎么解決，而處理的辦法是使用promise, 即在action中使用promise，當成功時，又回到了 .vue 頁面，然后就可以使用this.$router定位到我們想要的頁面了。 但是這總歸是一種繞過問題的方法，是不可取的，所以，這時需要做的就是 stackoverflow 上去搜索了。 不出意料， 我們可以看到問題如下：
https://stackoverflow.com/questions/40736799/how-to-navigate-using-vue-router-from-vuex-actions
./router就是我們在src下的router文件，實際上是./router/index.js的省略。
beforeRouteEnter
beforeRouteEnter (to, from, next) {
console.log(from.path);
next();
},
通過這個鈎子函數，我們就可以獲取到相關的路由了。
更多看這里。。。 https://router.vuejs.org/en/advanced/navigation-guards.html
這里非常重要的一點就是vue-router中beforeRouterEnter 的時間是早於vuex中的create的，所以，我們可以根據路由信息進行判斷。