当前位置: 首页 > news >正文

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

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
该内容为抄袭,因为自己试了好用,只是拿到自己这方便忘了的时候查看。
 

转载于:https://www.cnblogs.com/itbainianmei/p/6257357.html

相关文章:

  • 电脑端下载今日头条的短视频
  • 分方式缓存常用的一致性hash是什么原理
  • webbench压力测试工具
  • 飞天5K实战经验:大规模分布式系统运维实践
  • 我的jQuery动态表格插件
  • ExcelReport第一篇:使用ExcelReport导出Excel
  • select空间提交form表单传递参数
  • 反射:InvokeMethod 活动调用多种方法的方法配置要点
  • wampserver配置https
  • 小型软件项目开发流程探讨
  • Linux编程学习笔记 | Linux多线程学习[2] - 线程的同步
  • iOS根据网络图片的size大小设置UIImageView的大小
  • sqlmap 本地安装
  • Ubuntu server 14.04升级16.04
  • 提取CString中的汉字及个数
  • python3.6+scrapy+mysql 爬虫实战
  • 【node学习】协程
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • 【从零开始安装kubernetes-1.7.3】2.flannel、docker以及Harbor的配置以及作用
  • Java应用性能调优
  • js学习笔记
  • js正则,这点儿就够用了
  • Less 日常用法
  • Netty源码解析1-Buffer
  • Object.assign方法不能实现深复制
  • SQLServer之创建显式事务
  • VuePress 静态网站生成
  • Windows Containers 大冒险: 容器网络
  • 反思总结然后整装待发
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 构造函数(constructor)与原型链(prototype)关系
  • 吴恩达Deep Learning课程练习题参考答案——R语言版
  • 用简单代码看卷积组块发展
  • 400多位云计算专家和开发者,加入了同一个组织 ...
  • Salesforce和SAP Netweaver里数据库表的元数据设计
  • 曾刷新两项世界纪录,腾讯优图人脸检测算法 DSFD 正式开源 ...
  • ​2021半年盘点,不想你错过的重磅新书
  • ​ubuntu下安装kvm虚拟机
  • (2021|NIPS,扩散,无条件分数估计,条件分数估计)无分类器引导扩散
  • (delphi11最新学习资料) Object Pascal 学习笔记---第5章第5节(delphi中的指针)
  • (Redis使用系列) Springboot 实现Redis 同数据源动态切换db 八
  • (分类)KNN算法- 参数调优
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (十二)springboot实战——SSE服务推送事件案例实现
  • (转)fock函数详解
  • (转)Linq学习笔记
  • (转)程序员技术练级攻略
  • .net core 3.0 linux,.NET Core 3.0 的新增功能
  • .NET Framework 3.5中序列化成JSON数据及JSON数据的反序列化,以及jQuery的调用JSON
  • .NET MVC之AOP
  • .net on S60 ---- Net60 1.1发布 支持VS2008以及新的特性
  • .NET 设计模式—简单工厂(Simple Factory Pattern)
  • .net 验证控件和javaScript的冲突问题
  • .Net7 环境安装配置
  • .netcore 如何获取系统中所有session_如何把百度推广中获取的线索(基木鱼,电话,百度商桥等)同步到企业微信或者企业CRM等企业营销系统中...