关于详情页的具体制作
我们此步实现的是，在主页里面点击下列商品的时候，是可以跳转到详情页并携带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与点击商品出现详情页的操作。