关于详情页的具体制作（一）

我们此步实现的是，在主页里面点击下列商品的时候，是可以跳转到详情页并携带iid，那么接下来记录下具体的一些思路。

首先，在商品详情的组件当中添加一个事件监听事件，之后，在这个事件当中，实现跳转到详情页。

详情页的话，我直接添加了一个路由，方便之后的操作,根据观察api，可知每个商品的iid是不一样的，因此我们使用了动态路由。

首先，在index.js中添加下面语句：

const detail =()=> import('../../views/detail/detail')
Vue.use(Router)
const routes=[
  {path:'/detail/:iid',
  component:detail}
]
const router=new Router({
    routes,
    mode:"history"
})
export default router

goodsitem里面所添加的具体内容如下：

首先，在<template>模板的根元素上的处理：

<div class="goodsitem" @click="itemclick">

在methods里面的添加：

<script>
export default {
name: "goodsitem",
  props:{
  goodsitem: {
    type:Object,
    default(){
      return{}
    }
  }
  },
methods:{
  imageload(){
    this.$bus.$emit("itemimageload")
  },
  itemclick(){
    this.$router.push('./detail/'+this.goodsitem.iid)
  }
}
}
</script>

然后，对detail.vue做出以下处理：

data() {
    return {
      iid: null
    }
  }，
 created() {
    // console.log(this.$route.params.iid)
    this.iid = this.$route.params.iid
  }

那下面的话，我们来实现下详情页的导航栏的制作。之前，在做home首页的时候，封装了一个navbar组件，那么接下来可以直接拿过来进行一定的修改，来达成以下效果：

由于我之前的封装，是设置了三个具名插槽：

<template>
  <div class="navbar">
    <div class="left"><slot name="left"></slot></div>
    <div class="center"><slot name="center"></slot></div>
   <div class="right"><slot name="right"></slot></div>
  </div>
</template>

可以把这个进行一定的修改，用进详情页的导航栏中。

我们可以再封装一个detailnav组件，具体写法如下：

<template>
  <div>
    <navbar>
      <div slot="left" class="left" @click="backclick">
        <img src="../../../src/assets/img/back.svg">
      </div>
      <div slot="center" class="title">
        <div v-for="(item,index) in title"
             class="aaa" :class="{active:index === currentIndex}" v-on:click="itemclick(index)">
          {{item}}
        </div>
      </div>
    </navbar>
  </div>
</template>

<script>
import Navbar from "../../../src/components/common/navbar/navbar";
export default {
  name: "detailnav",
  components: {Navbar},
  data(){
    return{
      title:['商品','参数','讨论','推荐'],
      currentIndex:0
    }
  },
  methods:{
    itemclick(index){
      this.currentIndex = index
    },
    backclick(){
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.title{
  display: flex;
  font-size: 13px;
}
.aaa{
  flex: 1;
}
.active{
  color: greenyellow;
}
.left img{
  margin-top: 10px;
}
</style>

首先，导入navbar。因为，详情页要实现的是，四个选择项，那么我们可以把这四个选项，先存放在data当中，此代码中，名为title的数组。先使用其center插槽，进行一定的操作，在其中遍历title数组中的每一个元素，这样的话即可显示出四个选项。这样写之后，显示出来的四个选项为纵向排列，那么我们在类中设置其display为flex，并将flex设置为1，实现横向平均分布。之后，为了实现，点击某选项，便会变色。那么，我们先在data当中设置一个currentIndex为0，之后在其中实现一个监听。监听代码中的itemclick事件，我们先用v-bind绑定一个类，在这个类里面我们去设置文字被点中后所需要他变的颜色，之后在methods中处理，this.currentIndex = index，当index ===  currentIndex的时候，便会显示出相应的颜色。在这里的话，四个选项以及点中显示为黄绿色已经做完了。

那么接下来，还有最后一个功能实现，即为点击左上角的箭头，便可返回主页。

则，先在为left的具名插槽中添加箭头的图片。在此插槽当中事件监听一个backclick，backclick中实现路由跳转的话，直接显示this.$router.back()，即可跳回主页。

之后，就是在detail.vue中，直接import且注册detailnav组件，且在<template>组件中，添加这个组件的标签即可。

那么接下来，我们即来实现详情页的轮播图，之前在主页当中已经写过轮播组件了。那么目前最主要的即是，取到每次需要展示的图片。

首先，现在网络请求模块部分的文件里增加一个，detail.js文件，具体显示如下：

import {request} from './request'

export function getdetails(iid){
  return request({
    url:"detail",
    params:{
      iid
    }
  })
}

之后，我们在detail.vue中进行如下操作：

import {getdetails} from "../../network/detail";
export default {
 
  data() {
    return {
      iid: null,
      topImages: []
    }
  },
  created() {
    // console.log(this.$route.params.iid)
    this.iid = this.$route.params.iid
    getdetails(this.iid).then(res => {
      console.log(res);
      const big =res.data.result;
      this.topImages = big.itemInfo.topImages
      console.log(this.topImages)
    })
    // activated() {
    //   this.iid = this.$route.params.iid
    //   console.log(this.$route.params.iid)
 //const big =res.data.result;
    //  this.topImages = big.itemInfo.topImages
    //
    //   })
    // }
  }
}
</script>

这里我们有个地方需要注意，因为之前写首页的时候，我用<keep-alive>包裹了<router-view/>，因此，如果不添加任何的话，这边的created会一直存在一直存在，而不会消亡，会导致出点击商品A的时候的轮播图，而在点击商品B的时候依旧出现的是商品A的轮播图。因此，有两个办法。1.写入activated函数当中。第二种，在app.vue中的<keep-alive>中添加exclude并添加其路由名。此处便为，<keep-alive exclude='detail'>(路由名）即可。之后，再次封装一个detailswiper组件，实现如下代码：

<template>
<swiper>
  <swiperitem   class="tiny" v-for="item in topImages">
    <img :src="item">
  </swiperitem>
</swiper>
</template>

<script>
import swiper from "../../../src/components/common/swiper/swiper";
import swiperitem from "../../../src/components/common/swiper/swiperitem";
export default {
  name: "detailswiper",
  components:{swiperitem,swiper},
  props:['topImages']
}
</script>

<style scoped>
.tiny{
  height: 300px;
  overflow-y: hidden;
}
</style>

这样即完成了，轮播与navbar与点击商品出现详情页的操作。