前端采用前后端分離的方式進行開發，我們使用vue2.0框架，做單頁面應用難免會用到vue-router，今天把項目中的用到router-link摘出來，一是想整理一下這些用法，方便下次快速查找，二是重新再過一下vue-router，增加熟悉度。也希望下面這些例子能幫到其他使用vue-router的朋友。

1，$route.params

類型: Object

一個 key/value 對象，包含了 動態片段 和 全匹配片段，如果沒有路由參數，就是一個空對象。

path: '/detail/:id' 動態路徑參數 以冒號開頭

const routes = [ {path: '/detail/:id', component: Detail, name: 'detail', meta: {title: ''}}, {path: '/activity', component: Activity, name: 'activity', meta: {isNeedAuth: false, title: '活動現場'}},];

還可以在一個路由中設置多段『路徑參數』，對應的值都會設置到 $route.params 中

1個參數

模式： /user/:username

匹配路徑： /user/evan

$route.params：{ username: 'evan' }

多個參數

模式： /user/:username/post/:post_id

匹配路徑：/user/evan/post/123

$route.params：{ username: 'evan', post_id: 123 }

復用組件時，想對路由參數的變化作出響應的話，你可以簡單地 watch（監測變化） $route 對象：

const User = { template: '...', watch: { '$route' (to, from) {  // 對路由變化作出響應... } }}

或者像下面這樣，只要$route發生變化，就可以做某事：

export default { data () { return {} }, watch: { // 如果路由有變化，會再次執行該方法 '$route': 'doSomeThing' }, methods: { doSomeThing(){} }}

綜合案例

// 當匹配到一個路由時，參數值會被設置到 this.$route.params，可以在每個組件內使用。// 可以通過this.$route.params.id來取上動態的id<router-link :to="{path: '/detail/' + this.$route.params.id}" >此團詳情</router-link>// 還可以用命名路由的方式：<router-link :to="{ name: 'detail', params:{ id: this.$route.params.id }}" >此團詳情</router-link>// 還可以用router.push()的方式router.push({name:'detail', params: { id: this.$route.params.id}})// 以上三種方式都可以實現跳轉，都可以通過this.$route.params來取到參數

2，$route.query

類型: Object

一個 key/value 對象，表示 URL 查詢參數。例如，對于路徑 /foo?user=1，則有 $route.query.user == 1，如果沒有查詢參數，則是個空對象。

// 動態數據的查詢參數 export default {  data() {   return {    queryData: {}   }  },  created() {   this.$http.get(url)    .then(function (response) {     // ...     if (data.code == 0) {      this.queryData.order_id = data.content.order_id;      this.queryData.business_id = data.content.business_id;      this.queryData.coupon_id = data.content.coupons.coupon_id;     }     // ...    }, function (response) {     // ...    })  }, }// 使用<router-link :to="{ path: '/backend/verify_coupon', query:this.queryData }">驗證抵扣券</router-link>