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 匿名函数及其代码模式原理
Mar 19 Javascript
获取body标签的两种方法
Oct 13 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
小程序实现左滑删除效果
Jul 25 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
Windows下的PHP5.0详解
2006/11/18 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP内核探索之变量
2015/12/22 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
JS数据类型判断的几种常用方法
2020/07/07 Javascript
python中base64加密解密方法实例分析
2015/05/16 Python
python数组过滤实现方法
2015/07/27 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
土木工程师岗位职责
2013/11/24 职场文书
家长评语大全
2014/01/22 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
入党自荐书范文
2015/03/05 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
合作合同协议书
2016/03/21 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android