时间:2021-05-26
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;传给父组件,父组件中通过
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 组件之间传参及获取动态参数的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
最近在做一个vue的项目,其中使用了vue2.0,vue-router2.0。在使用vue-router的时候跳了一个很大的坑,router-view不能渲染,
今天做项目时踩到了vue-router传参的坑(jquery和params),所以决定总结一下二者的区别。1.jquery方式传参和接收参数传参:this.$r
Angular路由传参首页路由传参柳絮飞祭奠$state.go传参数传参数varapp=angular.module("app",['ui.router']);
VueRouter传参方式:1.this.$router.push({name:'模块名称',params:{//各参数}})router.js:exportd
前言在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了。比如A组件要告诉一件事给B组件