第三个页面 详情页面。本篇主要是来做详情页面的动态路由和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"></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>
好啦,这块儿布局完成。