Vue系列:通过vue-router如何传递参数示例


Posted in Javascript onJanuary 16, 2017

使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下:

参考文献:http://router.vuejs.org/en/named.html

主要有以下几个步骤:

(1) 设置好路由配置

router.map({
 '/history/:deviceId/:dataId': {
 name: 'history', // give the route a name
 component: { ... }
 }
})

这里有2个关键点:

a)给该路由命名,也就是上文中的 name: 'history',

b)在路径中要使用在路径中使用冒号开头的数字来接受参数,也就是上文中的 :deviceId, :dataId;

(2)在v-link中传递参数;

<a v-link="{ name: 'history', params: { deviceId: 123, dataId:456 }}">history</a>

这里的123,456都可以改用变量。

比如该template所对应的组件有2个变量定义如下:

data: function() {

 return {

  deviceId:123,

  dataId:456
  }

}

此时上面那个v-link可以改写为:

<a v-link="{ name: 'history', params: { deviceId: deviceId, dataId: dataId }}">history</a>

(3)在router的目标组件上获取入参

比如在router目标组件的ready函数中可以这么使用。

ready: function(){

  console.log('deviceid: ' + this.$route.params.deviceId);

  console.log('dataId: ' + this.$route.params.dataId);

 }

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

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 Javascript
微信小程序 登录实例详解
Jan 16 #Javascript
微信小程序 传值取值的几种方法总结
Jan 16 #Javascript
详解vue-Resource(与后端数据交互)
Jan 16 #Javascript
微信小程序 封装http请求实例详解
Jan 16 #Javascript
详解vue-validator(vue验证器)
Jan 16 #Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 #Javascript
webpack入门必知必会
Jan 16 #Javascript
You might like
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
python 5个顶级异步框架推荐
2020/09/09 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
介绍一下#error预处理
2015/09/25 面试题
法律专业求职信
2014/05/24 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
远程培训的心得体会
2014/09/01 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书