前端采用前后端分离的方式进行开发,我们使用vue2.0框架,做单页面应用难免会用到vue-router,今天把项目中的用到router-link摘出来,一是想整理一下这些用法,方便下次快速查找,二是重新再过一下vue-router,增加熟悉度。也希望下面这些例子能帮到其他使用vue-router的朋友。
1,$route.params
类型: Object
一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。
path: '/detail/:id' 动态路径参数 以冒号开头
还可以在一个路由中设置多段『路径参数』,对应的值都会设置到 $route.params 中
1个参数
模式: /user/:username
匹配路径: /user/evan
多个参数
模式: /user/:username/post/:post_id
匹配路径:/user/evan/post/123
复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象:
或者像下面这样,只要$route发生变化,就可以做某事:
综合案例
// 还可以用命名路由的方式:
// 还可以用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,如果没有查询参数,则是个空对象。
<router-link :to="{ path: '/backend/verify_coupon',query:this.queryData }">验证抵扣券
3,定义路由的时候可以配置 meta 字段
实际工作中使用的时候就可以像下面这样:
4,append
设置 append 属性后,则在当前(相对)路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b
如果上面这个路由是从home页面跳转过来,得到的结果就是/home/coupon/detail/id
5,active-class
类型: string
默认值: "router-link-active"
设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
7,综合案例
// to的值:字符串形式
// to的值:对象形式,拼接多个动态参数
// to的值:对象形式
<router-link :to="{path: '/home'}">返回首页
// to的值:对象形式,拼接动态参数
<router-link to="{path: '/backend/coupon_order_detail/' + product.order_id+'?order_status='+product.order_status}">
// to的值:对象形式,带一个路径参数
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。