石头的实习之路3——Vue2点击产品跳转详情页的实现

需求：制作一个详情页面的模板，点击某个产品的时候在模板中渲染数据。

思路：模板的制作不多介绍。点击产品时，带参跳转页面，详情页根据地址栏中的参数请求相对应的接口，拿到数据后渲染模板。

实现：

1.点击商品，设置一个@click方法

<a @click="skip_m320('m320')">    //点击时将产品型号作为参数传入


//在methods中定义的方法
skip_m320(type){
				this.$router.push({
					path: '/xxx/product_center/commodity_details',    //跳转的路由
					query:{    //跳转路由的参数
						type:type    //前面的type是参数的名称
                                    //后面的type是点击产品时传过来的型号 这里也就是m320
					}
				})
			}

跳转到相应页面后地址栏就是这样：

2.在详情页中定义一个方法用来拿到地址栏中的参数

//地址栏中找到参数名为type的值
getparameter(){
				this.parameter=this.$route.query.type
			}

在created中加入这个方法，在页面加载之前就拿到这个参数