转载：http://www.jb51.net/article/113427.htm
前端采用前后端分离的方式进行开发，我们使用vue2.0框架，做单页面应用难免会用到vue-router，今天把项目中的用到router-link摘出来，一是想整理一下这些用法，方便下次快速查找，二是重新再过一下vue-router，增加熟悉度。也希望下面这些例子能帮到其他使用vue-router的朋友。
1，$route.params
类型: Object
一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。
path: ‘/detail/:id‘ 动态路径参数 以冒号开头
|
1
2
3
4
|
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
|
1
|
$route.params：{ username: ‘evan‘ } |
多个参数
模式： /user/:username/post/:post_id
匹配路径：/user/evan/post/123
|
1
|
$route.params：{ username: ‘evan‘, post_id: 123 } |
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：
|
1
2
3
4
5
6
7
8
|
const User = { template: ‘...‘, watch: { ‘$route‘ (to, from) { // 对路由变化作出响应... } }} |
或者像下面这样，只要$route发生变化，就可以做某事：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
export default { data () { return {} }, watch: { // 如果路由有变化，会再次执行该方法 ‘$route‘: ‘doSomeThing‘ }, methods: { doSomeThing(){} }} |
综合案例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// 当匹配到一个路由时，参数值会被设置到 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，如果没有查询参数，则是个空对象。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// 动态数据的查询参数 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> |
3，定义路由的时候可以配置 meta 字段
|
1
2
3
4
|
// 举个例子const routes = [ {path: ‘/activity‘, component: Activity, name: ‘activity‘, meta: {isNeedAuth: false, title: ‘活动现场‘}},]; |
实际工作中使用的时候就可以像下面这样：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
import { setTitleHack } from ‘./utils‘;import Activity from ‘./views/activity.vue‘import Start from ‘./views/start.vue‘// 定义路由的时候在meta中加入自定义字段const routes = [ {path: ‘/activity‘, component: Activity, name: ‘activity‘, meta: {isNeedAuth: false, title: ‘活动现场‘}}, {path: ‘/start‘, component: Start, name: ‘start‘, meta: {isNeedAuth: false, title: ‘活动现场‘}},];const router = new VueRouter({...});router.beforeEach((to, from, next) => { // 动态修改页面的title setTitleHack(to.meta.title); // 根据自定义的路由元信息来做判断： if (to.meta.isNeedAuth !== false) { // do something } else { // do something } next();}); |
4，append
设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
<router-link :to="{path:‘/coupon/detail/‘+item.order_id, append:‘true‘}"></router-link>
如果上面这个路由是从home页面跳转过来，得到的结果就是/home/coupon/detail/id
5，active-class
类型: string
默认值: "router-link-active"
设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
<router-link tag="li" :to="{path:‘/home‘, activeClass: ‘bottom-nav-active‘}"></router-link>
7，综合案例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 命名路由，append 属性，查询参数，router-link渲染成<li>标签<router-link tag="li" :to="{name:‘demandindex‘, append:true, query: {isFormBackend: 1}, activeClass: ‘bottom-nav-active‘}"></router-link>// to的值：字符串形式<router-link to="banner.image_url" ></router-link>// to的值：对象形式，拼接多个动态参数<router-link :to="{path: ‘/my/modify?modify=fullname&val=‘ + profile.nickname}" ></router-link>// to的值：对象形式<router-link :to="{path: ‘/home‘}">返回首页</router-link>// to的值：对象形式，拼接动态参数<router-link to="{path: ‘/backend/coupon_order_detail/‘ + product.order_id+‘?order_status=‘+product.order_status}"></router-link>// to的值：对象形式，带一个路径参数<router-link :to="{path: ‘/detail/‘ + this.$route.params.id}" ></router-link> |