路由配置,首页与城市选择页面的链接

路由配置,首页与城市选择页面的链接

1) src\router\index.js文件中

//添加引入组件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
routes: [{
      path: '/',
      name: 'Home',
      component: Home
    }, {
      //添加城市列表的路由配置
      path: '/city',
      name: 'City',
      component: City
    }]

2) 建立列表页组件City.vue (src\pages建立city文件夹,在里建立列表页组件City.vue)

3) 建立City的头部组件Header.vue (city文件夹下建立components文件夹里建立Header.vue)

4) home文件夹下的Header.vue添加链接 router-link

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