二.Vue2.5开发去哪儿网app城市列表页①——城市选择页面路由配置和Header布局

在pages文件夹下新建city文件夹用于存放city组件和其子组件

路由更新，这里注意city的路径是path: '/city'，不再是首页的路径

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

Vue.use(Router)

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

接下来就是点击北京这个区域的时候会弹出city组件页面，而北京这这个区域在Home组件中，所以我们要在Home组件的Header子组件中添加router-link

    <router-link to="/city">
      <div class="header-right">
        {{this.city}}
        <span class="iconfont arrow-icon">&#xe64a;</span>
      </div>
    </router-link>

但是整个北京区域变成了绿色，因为router-link元素会设置a标签的颜色为绿色

所以我们在header-right样式中添加 color: #fff

然后完成CityHeader组件的代码编写

<template>
  <div class="header">
    <p>城市选择</p>
    <router-link to="/">
      <div class="iconfont header-back">&#xe624;</div>
    </router-link>
  </div>
</template>

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

<style lang="stylus" scoped>
  @import"~styles/varibles.styl"
  .header
    position: relative
    overflow: hidden
    height: .86rem
    text-align: center
    line-height: .86rem
    color: #fff
    background-color: $bgColor
    font-size: .32rem
    .header-back
      position: absolute
      top: 0
      left: 0
      width: .64rem
      font-size: .4rem
      color: #fff
</style>

最后完成搜索组件Search组件

<template>
  <div class="search">
    <input class="search-input" type="text" placeholder="输入城市名或拼音">
  </div>
</template>

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

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
  .search
    height .72rem
    background-color $bgColor
    padding 0 .1rem
    .search-input
      overflow hidden
      width 100%
      box-sizing border-box
      padding 0 .2rem
      height .62rem
      text-align center
      border-radius .06rem
      color #666
</style>

完成后效果