Vue学习笔记-项目开发4.1 动态路由及渐变效果（banner布局及详情页）

一、动态路由

       动态路由是指根据点击的不同路由的内容是会接收到不同的参数
格式：path: ‘/固定部分/:接收参数的变量’, 例如： path: ‘/detail/:id’ detail是路由固定内容，:id 后边变成动态路由，可以带一个参数，这个参数的值将绑定在id这个变量上

       1、添加动态路由

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

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
    }
  ]
})

       2、使用路由
       原来的推荐展示列表是通过ul li的方式进行展示的，我们想要实现点击这个一个li实现跳转的效果，那么我们需要在li外边添加一个router-link的标签实现跳转的功能，但是此时上边的文字的颜色会变成a标签的颜色，并不是我们想要的，此时有两种方式实现颜色恢复，
         ①给li重新定义样式，但是不方便
         ②将li标签换成router-link标签，然后添加tag=“li”，这样既可以实现li标签的效果，颜色也恢复如前，添加to就可以实现路由跳转了

<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>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .title
    margin-top: .2rem
    line-height: .8rem
    background: #eee
    text-indent: .2rem
  .item
    overflow: hidden
    display: flex
    height: 1.9rem
    .item-img
      width: 1.7rem
      height: 1.7rem
      padding: .1rem
    .item-info
      flex: 1
      padding: .1rem
      min-width: 0
      .item-title
        line-height: .54rem
        font-size: .32rem
        ellipsis()
      .item-desc
        line-height: .4rem
        color: #ccc
        ellipsis()
      .item-button
        line-height: .44rem
        margin-top: .16rem
        background: #ff9300
        padding: 0 .2rem
        border-radius: .06rem
        color: #fff
</style>

二、渐变效果
       1、渐变色
              background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
       2、项目图标内容的变更
              新增图标从阿里图标库下载下来之后的操作

       3、如同之前的项目结构一样，增加详情模块

详情根模块Detail.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模块

<template>
  <div class="banner">
    <img class="banner-img" src="http://img1.qunarzz.com/sight/p0/1602/68/68aa05adb5315f9990.water.jpg_600x330_0dcecae1.jpg">
    <div class="banner-info">
      <div class="banner-title">北京海洋馆(AAAA景区)</div>
      <div class="banner-number">
        <span class="iconfont banner-icon">&#xe63a;</span>
        39
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Detail'
}
</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
      line-height .6rem
      color #fff
      // 渐变色
      background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
      .banner-title
        flex 1
        font-size .32rem
        padding 0 .2rem
      .banner-number
        margin-top .14rem
        padding 0 .4rem
        line-height .32rem
        height .32rem
        border-radius .2rem
        background rgba(0, 0, 0, .8)
        font-size .24rem
        .banner-icon
          font-size .24rem
</style>