vue 一个简单的项目 之二 城市选择页面 step1

前面我们制作了首页，接下来，终于要制作另外的页面啦。

先创建一个分支 city-router，pull 下来，在新分支上写代码。

城市选择页面大致的样子如下。

    

好啦。进入新分支，开始写代码啦。

首先，我们要配置路由部分的内容。

打开 router 目录下的index.js 文件，如下

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

Vue.use(Router)

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

我们添加一个路由信息，如下

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

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

然后在pages 目录中，新建city 目录，在city 目录下，新建City.vue 文件。如下

<template>
  <div>city</div>
</template>

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

<style lang="stylus" scoped>

</style>

然后在跳转的组件 Header.vue 中改一下 template 部分，如下。

<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe624;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe632;</span>
      输入城市／景点／游玩主题
    </div>
    <router-link to="/city">
      <div class="header-right">
        {{this.city}}
        <span class="iconfont arrow-icon">&#xe600;</span>
      </div>
  </router-link>
  </div>
</template>

路由跳转就做好了。

下面写 City.vue 内部的内容。

在city 目录下，建立一个components 文件夹，在components 文件夹下 建一个文件Header.vue

<template>
  <div>
    <city-header></city-header>
  </div>
</template>

<script>
import CityHeader from './components/Header.vue'
export default {
  name: 'City',
  components: {
    CityHeader
  }
}
</script>

<style lang="stylus" scoped>

</style>

再写一个Header.vue ,如下。

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

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

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

好啦，可以提交合并啦。