详解vue-router 2.0 常用基础知识点之router-link

前端采用前后端分离的方式进行开发，我们使用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>