1-2 一级路由

一、一级路由

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/pages/Home.vue';
import City from '@/pages/City.vue';
Vue.use(Router)
export default new Router({
    mode:'history',
    routes:[
        {
            path: '/',
            name: 'home',
            component: Home
          },
          {
            path: '/city',
            name: 'city',
            component: City
          }
    ]
})

二、路由导航

<div>
       <router-link to="/home">home</router-link>
       <router-link to="/city">city</router-link>
</div>

//被选中的路由模块颜色
.router-link-active{
  color:red;
}

三、路由重定向

export default new Router({
    mode:'hash',
    routes:[
        {
            path: '/home',
            name: 'home',
            component: Home
          },
          {
           path:'/*',
           redirect:'/home'   
          }
    ]
})