一、一级路由

  1. import Vue from 'vue';
  2. import Router from 'vue-router';
  3. import Home from '@/pages/Home.vue';
  4. import City from '@/pages/City.vue';
  5. Vue.use(Router)
  6. export default new Router({
  7. mode:'history',
  8. routes:[
  9. {
  10. path: '/',
  11. name: 'home',
  12. component: Home
  13. },
  14. {
  15. path: '/city',
  16. name: 'city',
  17. component: City
  18. }
  19. ]
  20. })

二、路由导航

  1. //App.vue
  2. <div>
  3. <router-link to="/home">home</router-link>
  4. <router-link to="/city">city</router-link>
  5. </div>
  1. //被选中的路由模块颜色
  2. .router-link-active{
  3. color:red;
  4. }