Next, we will configure the route of the city selection page.
Add city.vue, click on the city, and then jump to the city page

//router.js
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 a set of routing configuration items
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/city',
      name: 'City',
      component: City
    }
  ]
})

Here's a little knowledge. Router link will add an a label to the outer layer of div.

Solution: add font color to the changed part
Next, we will create a new header.vue component.

//header.vue
<template>
    <div class="header">
        //City choice
    </div>
</template>
<script>
export default {
  name: 'CityHeader'
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.header
    height :.86rem
    line-height:.86rem
    overflow:hidden
    text-align:center
    color:#fff
    background:$bgColor
</style>

Register the header component into the City component, and we can see that the page is

//city.vue
<template>
<div>
<city-header></city-header>
</div>
</template>
<script>
import CityHeader from './components/Header'
export default {
  name: 'City',
  components: {
    CityHeader: CityHeader
  }
}
</script>
<style lang="stylus" scoped>

</style>

Add another return icon to the header, click and return to the home page. For some public things, we will extract the style and put it in variables.styl.

//header.vue
<template>
    <div class="header">
        //City choice
       <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
    height :$headerHeight
    line-height:$headerHeight
    overflow:hidden
    text-align:center
    color:#fff
    background:$bgColor
    font-size:.32rem
    position:relative
    .header-back
        width:.64rem
        text-align:center
        font-size:.4rem
        position:absolute
        top:0
        left:0
        color:#fff
</style>

Let's do a search component in the same way

//src\pages\city\components\Search.vue
<template>
    <div class="search">
        <input type="text" class="search-input" placeholder="Please enter city name or Pinyin">
    </div>
</template>
<script>
export default {
  name: 'CitySearch'
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.search
    height:.72rem
    background:$bgColor
    padding:0 .1rem
    .search-input
        box-sizing:border-box
        height:.62rem
        width:100%
        line-height:.62rem
        text-align:center
        border-radius:.06rem
        color:#666
</style>

Let's go to the list layout part of the city selection page.

//List.vue
<template>
    <div class="list">
        <div class="area">
            <div class="title border-topbottom">
                //Current city
            </div>
            <div class="button-list">
                <div class="button-wrapper">
                    <div class="button">Beijing</div>
                </div>
            </div>
        </div>
         <div class="area">
            <div class="title border-topbottom">
                //Hot cities
            </div>
            <div class="button-list">
                <div class="button-wrapper">
                    <div class="button">Beijing</div>
                </div>
                <div class="button-wrapper">
                    <div class="button">Beijing</div>
                </div>
                <div class="button-wrapper">
                    <div class="button">Beijing</div>
                </div>
                <div class="button-wrapper">
                    <div class="button">Beijing</div>
                </div>
                <div class="button-wrapper">
                    <div class="button">Beijing</div>
                </div>
                <div class="button-wrapper">
                    <div class="button">Beijing</div>
                </div>
            </div>
        </div>
         <div class="area">
            <div class="title border-topbottom">
                A
            </div>
            <div class="item-list">
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
            </div>
        </div>
        <div class="area">
            <div class="title border-topbottom">
                B
            </div>
            <div class="item-list">
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
            </div>
        </div>
        <div class="area">
            <div class="title border-topbottom">
                C
            </div>
            <div class="item-list">
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
                <div class="item border-bottom">Alar</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'CityList'
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.border-topbottom
    &:before
        border-color:#ccc
    &:after
        border-color:#ccc
.list
    overflow:hidden
    position:absolute
    top:1.58rem
    left:0
    right:0
    bottom:0
    .title
        line-height:.44rem
        background:#eee
        padding-left:.2rem
        color:#666
        font-size:.26rem
    .button-list
        padding:.1rem .6rem .1rem .1rem
        overflow:hidden
        .button-wrapper
            width:33.33%
            float:left
            .button
                margin:.1rem
                text-align:center
                border:.02rem solid #ccc
                border-radius:.06rem
                padding:.1rem 0
    .item-list
        .item
            line-height:.76rem
            color:#666
            padding-left:.2rem
</style>

Now the effect of the whole page is

But we will find that the middle part cannot slide. We use better scroll to solve this problem.

npm install better-scroll --save

Use this plug-in correctly in your code

We can see that now the page can be pulled up and down.

Next, we encapsulate the letter part into a component.

//Alphabet.vue
<template>
   <ul class="list">
       <li class="item">A</li>
       <li class="item">B</li>
       <li class="item">C</li>
       <li class="item">D</li>
       <li class="item">E</li>
       <li class="item">F</li>
       <li class="item">G</li>
   </ul>
</template>
<script>
export default {
  name: 'CityAlphabet'
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.list
    display:flex
    flex-direction:column
    justify-content:center
    top:1.58rem
    right:0
    bottom:0
    width:.4rem
    position:absolute
    .item
        text-align:center
        line-height:.4rem
        text-align:center
        color:$bgColor
</style>

Now our page looks like this

Tomorrow we will render the city list page with data.
See you tomorrow.