vue 一个简单的项目 之三 详情页面 step1

第三个页面 详情页面。本篇主要是来做详情页面的动态路由和banner 布局。

首先，git 上新建分支 detail-banner，pull 下来，在新分支上工作。

我们希望，在首页点击下面 热销推荐中每一项，会进入详情页。

首页，使用的是Recommend.vue 组件。我们该一下Recommend.vue 的代码，给它的li 包裹一个路由跳转的标签，如下。

<template>
  <div>
    <div class="title">热销推荐</div>
    <ul>
      <router-link to='/detail'>
        <li class="item border-bottom" v-for="item of list" :key="item.id">
          <img class="item-img" :src='item.imgUrl' />
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc">{{item.desc}}</p>
            <button class="item-button">查看详情</button>
          </div>
        </li>
      </router-link>
    </ul>
  </div>
</template>

上面这么做，功能上是可以的。但是li 中的字体样式会变化。

我们可以写css，还原这种变化，但是有一种更好的解决方法，如下。

我们把li 直接改为router-link 标签，再加上tag = "li" 。这样在浏览器渲染的时候，不会把router-link 渲染称 <a> 标签，而是会渲染成li 标签。

<template>
  <div>
    <div class="title">热销推荐</div>
    <ul>
      <router-link
        tag="li"
        class="item border-bottom"
        v-for="item of list"
        :key="item.id"
        :to="'/detail/' + item.id"
      >
        <img class="item-img" :src='item.imgUrl' />
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>

好啦。Recommend.vue 页面就做这些修改啦。

下面我们去路由配置文件 src/router/index.js 页面，添加路由。

注意，由于我们上面进入的路由是带参数的（item.id），因此，我们配置的路由，配置动态路由。

index.js 如下。path 为 ‘/detail/:id’ 表示，这个路径，前面必须是 /detail/ 后面是参数，参数则保存在 变量id 中。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home.vue'
import City from '@/pages/city/City.vue'
import Detail from '@/pages/detail/Detail.vue'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/city',
      name: 'City',
      component: City
    }, {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]
})

好的，然后去建detail 的组件。

先在src/pages 里建一个文件夹 detail，然后在文件夹里面，建一个文件 Detail.vue.

初始化 Detail.vue 如下。

<template>
  <div>hello</div>
</template>

<script>
export default {
  name: 'Detail'
}
</script>

<style lang="stylus" scoped>

</style>

下面，我们来写详情页面的banner 布局。

我们pages/detail 下建一个目录 components, 在这个目录下建一个文件 Banner.vue。如下。

<template>
  <div>hello</div>
</template>

<script>
export default {
  name: 'DetailBanner'
}
</script>

<style lang="stylus" scoped>

</style>

在 Detail.vue 中引入Banner.vue ,如下。

<template>
  <div>
    <detail-banner></detail-banner>
  </div>
</template>

<script>
import DetailBanner from './components/Banner'
export default {
  name: 'Detail',
  components: {
    DetailBanner
  }
}
</script>

<style lang="stylus" scoped>

</style>

我们写一下，Banner.vue 里的代码。

<template>
  <div class="banner">
    <img class="banner-img" src="https://dimg07.c-ctrip.com/images/w30k0o000000esrxi8010.jpg_Z_800_600.jpg">
    <div class="banner-info">
      <div class="banner-title">
        孔雀蓝天空
      </div>
      <div class="banner-number">
        <span class="iconfont banner-icon">&#xe632;</span>
        100
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailBanner'
}
</script>

<style lang="stylus" scoped>
  .banner
    position: relative
    overflow: hidden
    height: 0
    padding-bottom: 55%
    .banner-img
      width: 100%
    .banner-info
      display: flex
      position: absolute
      left: 0
      right: 0
      bottom: 0
      color: #fff
      line-height: .6rem
      background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
      .banner-title
        flex: 1
        font-size: .32rem
        padding: 0 .2rem
      .banner-number
        height: .32rem
        line-height: .32rem
        margin-top: .14rem
        padding: 0 .4rem
        border-radius: .2rem
        background: rgba(0,0,0,.8)
        font-size: .24rem
        .banner-icon
          font-size: .24rem
</style>

好啦，这块儿布局完成。