详情页组件detail

新建detail.vue；（重要的视觉组件，放在view中）

router中配置index.js的相关路由信息；（路由传递数据的两种方式，params和query，这里用params方式），

{
   path: "/detail/:iid",
   component: Detail
}

给商品详情页组件添加点击事件和对应的方法

itemClick() {
      this.$router.push("/detail/" + this.goodsItem.iid);
    },

跳转的配置完成了。再将iid保存到详情页组件；

created() {
    this.iid = this.$route.params.iid;
    // console.log(this.$route);
  },

1、导航栏部分

1-1原本应该在deatil.vue中使用navbar.vue组件，但是为了业务分离，简洁美观，单独抽取一个navbar类型的组件，在当前detail.vue中新建一个子文件，单独封装一个新的detailnavbar组件；

1-2在detailnavabar组件中，导入navbar.vue，分别实现标题名称（v-for），点击事件在动态绑定class

:class="{ active: index === curIndex }"
          @click="titleClick(index)"
//
methods: {
    titleClick(index) {
      this.curIndex = index;
    },
  },

1-3在detailnavbar中左边添加返回按钮

backClick() {
      this.$router.back();//this.$router.go(-1)
    },

2、轮播图部分

轮播图组件需要向服务器请求数据，故需要单独封装请求方法(detail.js)，以及对数据进行相关的存储和操作，层级关系是，detail组件的created（）创建