P180-跳转到详情页并且携带id

一、

1. 监听GoodsListItem的点击,@click="itemClick"

P180-跳转到详情页并且携带id_第1张图片

 P180-跳转到详情页并且携带id_第2张图片

2. 

P180-跳转到详情页并且携带id_第3张图片

 router-----index.js P180-跳转到详情页并且携带id_第4张图片

 P180-跳转到详情页并且携带id_第5张图片

 3.  Detail.vue

P180-跳转到详情页并且携带id_第6张图片

 4. GoodsListItem.vue

P180-跳转到详情页并且携带id_第7张图片

 路由跳转要传递参数有两种方法:

1.动态路由的方式

 
  

P180-跳转到详情页并且携带id_第8张图片

 

P180-跳转到详情页并且携带id_第9张图片

 

 2.query的方式

P180-跳转到详情页并且携带id_第10张图片

 我们采用第一种动态路由的方式将iid传入详情页,现在详情页要把iid拿出来

path: '/detail/:iid' 和 this.$route.params.iid中的iid名字要一致

P180-跳转到详情页并且携带id_第11张图片

 二、下面来做具体详情页

2.1 导航栏的制作

P180-跳转到详情页并且携带id_第12张图片

 但是导航栏比较复杂,不建议在detail里面做,所以将导航栏单独封装

Detail.vue

P180-跳转到详情页并且携带id_第13张图片

 

view/detail/childComps/DetailNavBar.vue

P180-跳转到详情页并且携带id_第14张图片

 基本结构封装完成,然后再具体写内容

DetailNavBar.vue

P180-跳转到详情页并且携带id_第15张图片

P180-跳转到详情页并且携带id_第16张图片 

P180-跳转到详情页并且携带id_第17张图片 

 

你可能感兴趣的:(webview,c#,android)