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

在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组件页面，而北京这2个字在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>

标签：city,City,app,import,组件,Home,path,Vue2.5,路由
来源： https://blog.csdn.net/Vansal/article/details/87894981