跳转到Detail组件

　　我们在前面将每件商品的信息传给了GoodsListItem组件，保存在goodsItem变量中。并且每件商品有一个唯一的标识符iid。当点击该商品后，会跳转到该商品的详情页。所有的详情页使用同一个组件Detail，今天我们来回顾一下Detail组件的开发过程。

　　首先需要配置路由，由于Detail组件并不唯一对应某一个页面，所以它要配置为动态路由。动态路由的配置方法有两种：params方法和query方法。（设Id的值为123）

　　　　params方法：在路由表中配置时path: '/detail/:id'，使用时'/detail/' + Id。传递后形成的路径为/detail/123。传递过来的路由参数（如id）保存在当前路由对象$route的params属性中。

　　　　query方法：在路由表中配置时path: '/detail'，使用时{path: '/detail', query: {iid: Id}}。传递后形成的路径为/detail/?iid=123。

　　采用第一种方法，代码如下：

    //    路由懒加载
    const Detail = () => import('views/detail/Detail')
    //    在路由表routes中
    {
      path: '/detail/:id',
      component: Detail
    }

    //    在goodsListItem组件中
    itemClick(){
      this.$router.push('/detail/' + this.goodsItem.iid)
    }

    //    在detail组件的created钩子函数中
    this.iid = this.$route.params.id;

　　还需要注意的是，在之前我们在router-view标签外面加上了keep-alive标签，目的是每次离开Home页面时不销毁这个组件并保留相关状态，这样再次回来时能直接激活。但是这显然不适用于Detail组件，因为若Detail组件也被keep-alive，那当用户点击其它商品查看时，始终会跳转到第一次点击的商品的详情页。所以我们给keep-alive标签添加一个exclude属性，值为“Detail”。

　　接下来便要获取当前商品的详情数据了，代码和之前类似：

// 在Deail组件的created钩子函数中调用getDetail函数
getDetail(this.iid).then((res) => {
      const data = res.result;
      //  1、获取顶部的图片轮播数据   
      this.topImages = data.itemInfo.topImages;
      //  2、获取商品信息
      this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      //  3、获取店铺信息
      this.shop = new Shop(data.shopInfo);
      //  4、保存商品详情数据
      this.detailInfo = data.detailInfo;
      //  5、获取参数信息
      this.paramsInfo = new GoodsParam(
        data.itemParams.info,
        data.itemParams.rule
      );
      //  6、获取评论信息
      if (data.rate.cRate !== 0) {
        this.commentInfo = data.rate.list[0];
      }
    });

//    定义getDetail函数
export function getDetail(iid){
  return request({
    url: '/detail',
    params: {
      iid
    }
  })
}

可以看到，上面拿到数据后将它们进行了分类保存，事实上，每一类就对应一个组件，从上到下分别为：顶部导航条DetailNavBar、底部的导航条DetailBottomBar、轮播图DetailSwiper、商品信息DetailBaseInfo、店铺信息DetailShopInfo、商品大图DetailGoodsInfo、买家评论DetailCommentInfo和相似推荐GoodsList。后面我们就按照这个顺序看看这些组件如何实现的。