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 相关文章推荐
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 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/06/18 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
python list转dict示例分享
2014/01/28 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python Subprocess模块原理及实例
2019/08/26 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
销售员求职个人的自我评价
2014/02/19 职场文书
合作投资意向书
2014/04/01 职场文书
助学金感谢信
2015/01/20 职场文书
呐喊读书笔记
2015/06/30 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js