vue-列表页详情页-组件之间参数传递-this.$route.query

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

               })(),

        }

}