vue路由表（简单）

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const first = {
template: '<div>first内容</div>'
}
const second = {
template: '<div>second内容</div>'
}
const home = {
template: '<div>home内容</div>'
}
const firstFirst = {
template: '<div>firstFirst内容{{$route.params.id}}</div>'
}
const firstSecond = {
template: '<div>firstSecond内容</div>'
}
const sade = {
template: `
<div class="sade">
<h2>萨德</h2>
<router-view><router-view>
</div>
`
}

const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', name: 'home', component: home },
{ path: '/first', component: sade,
children: [
{path: '/', name: 'homefirst', component: first},
{path: 'first', name: 'homefirstFirst', component: firstFirst},
{path: 'second', name: 'homefirstSecond', component: firstSecond}
]
},
{ path: '/second', name: 'home second', component: second }
]
})

new Vue({
router,
template: `
<div id="r">
<h1>导航</h1>
<p>{{$route.name}}</p>
<ol>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/first">/first</router-link></li>
<ol>
<li><router-link :to="{name: 'homefirstFirst', params: {id: 123}}">/first</router-link></li>
<li><router-link :to="{name: 'homefirstSecond', params: {id:456}}">/second</router-link></li>
</ol>
<li><router-link to="/second">/second</router-link><li>
</ol>
<router-view class="sade"></router-view>
</div>
`
}).$mount('#app')