Vue开源项目记录二

Vue项目开发二-详情页

1. 详情页跳转

   项目需求：点击首页商品，跳转到商品的详情页

   项目实现

   —通过路由跳转实现详情页的切换，另外点击事件需要绑定在商品列表项目GoodsItemList组件上；

   —因此需要在路由映射文件下创建详情页的映射，并且这里需要注意我们使用的是动态跳转路由，因为需要携带id信息，方便请求不同详情页的数据信息；

   —这里通过push完成路由跳转，因为需要通过back返回首页；

2. 详情页导航栏

   项目需求：详情页导航栏，包括商品的相关参数和一个返回首页的图标；

   项目实现

   —复用之前我们封装的顶部导航组件，这里可在data()中传入导航内容；

   —分别为导航内容和返回首页图标添加点击监听事件，实现点击样式的改变和路由跳转this.router.back()返回首页的效果；

3. 详情页轮播图

   项目需求：详情页中实现轮播图效果

   项目实现

   —设计网络请求函数，从服务器请求详情页相关数据信息，这里需要注意要运用动态跳转路由，不同详情页携带不同id，请求到的数据也有所不同；因此路由映射中设置动态路由：path:'/detail/:id'；根据跳转路由的id信息请求不同详情页的数据；

   —详情页数据解构分析，我们一般请求到数据结构十分复杂，需要对请求到的数据进行结构分析，拿到我们所需要的数据信息；

   —这里轮播图复用轮播图组件，并通过props拿到详情页组件请求到的数据；

   —这里需要注意，之前包裹动态组件，在进行组件切换过程中将状态缓存，更好的实现DOM渲染；在详情页中，我们点击商品需要跳转到不同的详情页，所以需要通过exclude属性指定详情页不进行状态缓存，每次都需要重新创建组件；如果缓存或者不缓存没有生效，需要在路由映射中添加name属性，可能还需要添加meta属性：meta:{keepAlive:false/true}表示不被缓存/缓存；

4. 商品基本信息和商家店铺信息展示

   项目需求：商品的详细信息和相关价格描述，商家店铺信息的展示

   项目实现

   这两个组件的实现重点在于：数据提取整合！！

   —这里网络请求的数据需要进行提取处理，不同信息整合为一个对象，传递给我们封装的商品展示组件，这样方便组件开发的过程中只面向一个对象实现数据信息的展示；面向类开发：这里我们把多个数据封装到类里面，这样可以实现一个类封装多组数据，创建类对象，让组件面向类对象实现数据处理！！

   —v-f