vue-列表页详情页-组件之间参数传递-this.$route.query
mtindex跳转guessdetail一、router/index.js{ path:'/mtindex', component: mtindex, children:[ { path:':shopid', component:guessdetail } ] },二、mtindex.vue1、ht...
mtindex跳转guessdetail
一、router/index.js
{
path:'/mtindex',
component: mtindex,
children:[
{
path:':shopid',
component:guessdetail
}
]
},
二、mtindex.vue
1、html
<div class="content">
<uL>
<li v-for="(item,key) in indexguess" :class="{'bdr-bottom': key !== (indexguess.length-1)}" @click="selectItem(item)">
<div class="img"><img :src="item.img"></div>
<div class="con">
<p class="name">{{item.title}}</p>
<p class="detail">{{item.detail}}</p>
<p class="count"><cite>{{item.price}}元</cite> <span>门市价:{{item.ms_price}}</span><em>已售 {{item.sale}}</em></p>
</div>
</li>
</uL>
</div>
2、export{} //设置参数
methods:{
selectItem(item){
this.$router.push({
path: '/mtindex/detail', query:{shopid: item.id}
});
}
}
三、guessdetail.vue 获取参数
data(){
return{
shopid:(()=>{
/* $route.query获取shopid */
return this.$route.query.shopid
})(),
}
}
更多推荐
所有评论(0)