详解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 相关文章推荐
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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实现图片局部打马赛克的方法
2015/02/11 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
js防止表单重复提交实现代码
2012/09/05 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
node.js超时timeout详解
2014/11/26 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python字符串中查找子串小技巧
2015/04/10 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
Python实现汇率转换操作
2020/05/03 Python
基于Python测试程序是否有错误
2020/05/16 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
学校四群教育实施方案
2014/06/12 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript