vue-router2.0 组件之间传参及获取动态参数的方法


Posted in Javascript onNovember 10, 2017

1.标签

<li v-for=" el in hotLins" >
  <router-link :to="{path:'details',query: {id:el.tog_line_id}}">
    <img :src="el.image_list[0]">
    <h3>{{el.tourism_name}} {{el.tog_line_id}}</h3>
    <p>{{el.address}}</p>
  </router-link>
</li>

2.在组件中,需要传动态参数时,可以如上例子

<router-link :to="{path:'details',query: {id:el.tog_line_id}}">

3.query中的参数id就是要传的参数,在组件中获取的方法为:

created: function() {
  var id = this.$route.query.id;
  this.getData(id);
 },

4.如上述,this.$route.query.id就可以获取该参数,也可以通过,this.$root.id = id;传给父组件,父组件中通过

 // 根组件构造器
  var vm = Vue.extend({
   router: router,
   data: function() {
    return {
     id: '11484' //城会玩明细id
    }
   }
  });

5.定义data中的id,然后子组件中用props传递参数

props: {
    id: {
     type: String,
     required: true
    }
   },

6.router-view中,传递该参数:

<router-view :id="id" :order-info="orderInfo">
</router-view>

注意orderInfo时,在这边用的是:order-info。

以上这篇vue-router2.0 组件之间传参及获取动态参数的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
js+html获取系统当前时间
Nov 10 #Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 #Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 #Javascript
JS+Canvas绘制动态时钟效果
Nov 10 #Javascript
javascript实现电脑和手机版样式切换
Nov 10 #Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 #jQuery
js定时器+简单的动画效果实例
Nov 10 #Javascript
You might like
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
js 操作css实现代码
2009/06/11 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
canvas实现钟表效果
2017/02/13 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
python中__call__内置函数用法实例
2015/06/04 Python
Python实现LRU算法的2种方法
2015/06/24 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
python SocketServer源码深入解读
2019/09/17 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
园林系毕业生求职信
2014/06/23 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
2015年班组长工作总结
2015/04/10 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
创业计划书之熟食店
2019/10/16 职场文书
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers