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 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
JavaScript canvas绘制折线图
Feb 18 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数据类型之布尔型的介绍
2013/04/28 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
PHP echo()函数讲解
2019/02/15 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
js获取和设置属性的方法
2014/02/20 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
vue实现购物车小案例
2019/09/27 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
python操作xml文件示例
2014/04/07 Python
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
大学活动邀请函
2014/01/28 职场文书
寄语十八大感言
2014/02/07 职场文书
团购业务员岗位职责
2014/03/15 职场文书
元旦晚会主持词
2014/03/24 职场文书
社区党建工作方案
2014/06/10 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
分享3个非常实用的 Python 模块
2022/03/03 Python
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers