驴友网站城市详情页开发——城市选择页面路由配置

开发场景：我们希望点击驴友网首页北京这个页面，就可以进入我们新配置的city这个界面，

1.首先新建city.vue

2.在router的index.js中进行配置

//router/index.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 default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },{
      path: '/city',
      name: 'City',
      component: City
    }
  ]
})

3.在需要跳转的页面进行路由组件的插入和设计

//header.vue
<template>
...
        <router-link to="/city"> //这里表示要跳转到city这个页面上
          <div class="header-right">{{this.city}}<span class="sanjiao"></span></div>
        </router-link>
...
</template>

4.如果用v-for循环对象，那么key值是key就可以了