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 相关文章推荐
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
vue总线机制(bus)知识点详解
May 10 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
PHP5函数小全(分享)
2013/06/06 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
javascript每日必学之多态
2016/02/23 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
教你安装python Django(图文)
2013/11/04 Python
Python中super()函数简介及用法分享
2016/07/11 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python实现共轭梯度法
2019/07/03 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
Python如何读取、写入CSV数据
2020/07/28 Python
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
简述数组与指针的区别
2014/01/02 面试题
英语自荐信范文
2013/12/11 职场文书
给儿子的表扬信
2014/01/15 职场文书
人事专员的职责
2014/02/26 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
导游词幽默开场白
2019/06/26 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL