前端采用前后端分离的方式进行开发,我们使用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"htmlcode">
// 动态数据的查询参数 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 字段
// 举个例子 const routes = [ {path: '/activity', component: Activity, name: 'activity', meta: {isNeedAuth: false, title: '活动现场'}}, ];
实际工作中使用的时候就可以像下面这样:
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,综合案例
// 命名路由,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" ></router-link> // to的值:对象形式 <router-link :to="{path: '/home'}">返回首页</router-link> // to的值:对象形式,拼接动态参数 <router-link to="{path: '/backend/coupon_order_detail/' + product.order_id+'"></router-link> // to的值:对象形式,带一个路径参数 <router-link :to="{path: '/detail/' + this.$route.params.id}" ></router-link>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 纯音入心系列纯音乐《中央民族乐团-古筝传奇》1CD[MP3][253.1MB]
- 江玲.1989-这样你才爱我,是吗?【新作有声】【WAV+CUE】
- 郭美美.2010-我是郭美美【华纳】【WAV+CUE】
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 群星.2022-传家电视剧原声带【东阳欢娱】【FLAC分轨】
- 《摇滚教父 伍佰黄金精选 2CD》 [WAV+CUE][1GB]
- 《凤凰传奇 我从草原来》[WAV/分轨][400MB]
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]