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


Posted in Javascript onMay 10, 2017

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

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?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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
js实现无缝滚动图
Feb 22 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 #Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 #Javascript
JavaScript通过filereader接口读取文件
May 10 #Javascript
关于vue-router路径计算问题
May 10 #Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 #Javascript
You might like
php str_replace的替换漏洞
2008/03/15 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
Pytorch之Variable的用法
2019/12/31 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
一个SQL面试题
2014/08/21 面试题
编程实现去掉XML的重复结点
2014/05/28 面试题
大学生饮食配送创业计划书
2014/01/04 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
出纳员的岗位职责
2014/02/22 职场文书
总经理任命书
2014/03/29 职场文书
老师对学生的寄语
2014/04/09 职场文书
会计岗位说明书
2014/07/29 职场文书
人才市场接收函
2015/01/30 职场文书
九年级化学教学反思
2016/02/22 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
警用民用对讲机找不同
2022/02/18 无线电