1、在右路中跳转设置参数

 <router-link :to="{path: 'PhoneParticular', query: { id: phone.id  }}">
 		<img :src="phone.image[0].image1"/>
 </router-link>`

2、引入全部数据,在被跳转到的vue页面,获取路由地址id。

		 import phonedata from '../lib/shoppingPhoneData'
   		 data (){
    			return{
    				phonedata,
    				id : this.$route.query.id,
    				item:[]
    			}
    		},

3、在全部数据(phonedata)中找到与id对应的数据,页面一加载就执行mounted()函数

	  mounted(){
			for(var i=0;i<phonedata.length;i++){
				if(phonedata[i].id==this.id){
					this.item=phonedata[i]				
				}
			}
		}

4、在html中使用对应的数据

					 <div class="price-main">
    						<div class="fontMin floatL price-title">价格</div>
    						<div class="floatL price-count">
    							<span>¥</span>{{item.price}}
    						</div>
    					</div>
Logo

前往低代码交流专区

更多推荐