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 文件。如下

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

路由跳转就做好了。

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

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

再写一个Header.vue ,如下。

好啦，可以提交合并啦。