router.js
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const first = { template: '<h1>first</h1>' } const second = { template: '<h1>second</h1>' } const home = { template: '<h1>home</h1>' } const lala = { template: ` <div class="lala"> <h2>组件</h2> <router-view class="lalala"></router-view> </div> ` } const firstfirst = { template: '<h1>firstfirst</h1>' } const secondsecond = { template: '<h1>secondsecon</h1>' } const router = new VueRouter({ mode: 'history', base: __dirname, routes: [{ path: '/', component: home }, { path: '/first', component: lala, children: [{ path: '/first', component: firstfirst }, { path: '/second', component: secondsecond }] }, { path: '/second', component: second }] }) new Vue({ router, template: ` <div id="r"> <h1>导航</h1> <ol> <li><router-link to = "/">/</router-link></li> <li><router-link to = "/first">first</router-link></li> <ol> <li><router-link to = "/first">first</router-link></li> <li><router-link to = "/second">second</router-link></li> </ol> <li><router-link to = "/second">second</router-link></li> </ol> <router-view> </router-view> </div> ` }).$mount('#app')