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 相关文章推荐
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
js创建数组的简单方法
Jul 27 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
Vuex简单入门
Apr 19 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 Javascript
javascript函数式编程基础
Sep 15 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
机械专业毕业生自荐信
2013/11/02 职场文书
员工工作表扬信范文
2014/01/13 职场文书
安全教育感言
2014/03/04 职场文书
委托书的写法
2014/09/16 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
会计出纳岗位职责
2015/03/31 职场文书