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 easyui combox一些实用的小方法
Dec 25 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
javascript iframe跨域详解
Oct 26 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
vue element-ui table表格滚动加载方法
Mar 02 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
python基本语法练习实例
2017/09/19 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
基于python实现名片管理系统
2018/11/30 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Django框架验证码用法实例分析
2019/05/10 Python
Python字符串对象实现原理详解
2019/07/01 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
华润集团网上药店:健一网
2016/09/19 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
文明家庭先进事迹材
2014/01/27 职场文书
财务会计专业求职信
2014/06/09 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
单身申明具结书
2015/02/26 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
python 调用js的四种方式
2021/04/11 Python