源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-06-02 13:47 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:vue-router2.0 组件之间传参及获取动态参数的方法
[b]1.标签[/b]
<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>
[b]2.在组件中,需要传动态参数时,可以如上例子[/b]
<router-link :to="{path:'details',query: {id:el.tog_line_id}}">
[b]3.query中的参数id就是要传的参数,在组件中获取的方法为:[/b]
created: function() {
  var id = this.$route.query.id;
  this.getData(id);
 },
[b]4.如上述,this.$route.query.id就可以获取该参数,也可以通过,this.$root.id = id;传给父组件,父组件中通过 [/b]
 // 根组件构造器
  var vm = Vue.extend({
   router: router,
   data: function() {
    return {
     id: '11484' //城会玩明细id
    }
   }
  });
[b]5.定义data中的id,然后子组件中用props传递参数[/b]
props: {
    id: {
     type: String,
     required: true
    }
   },
[b]6.router-view中,传递该参数:[/b]
<router-view :id="id" :order-info="orderInfo">
</router-view>
[b]注意orderInfo时,在这边用的是:order-info。[/b] 以上这篇vue-router2.0 组件之间传参及获取动态参数的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部