router.js

import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter)


const a = { template: '<div>foo</div>' }
const b = { template: '<div>about</div>' }
const user = { template: '<div>user</div>' }

const firstFirst = { template: '<div>firstFirst内容</div>' }
const firstSecond = { template: '<div>firstSecond内容</div>' }

const asdf = {
    template: `
    <div class = "asdf">
      <h2>组件</h2>
      <router-view class="asdfg"></router-view>
    </div>
  `
}
const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        { path: "/a", component: a },
        {
            path: "/b",
            component: asdf,
            children: [
                { path: "/", component: b },
                { path: "first", component: firstFirst },
                { path: "second", component: firstSecond }
            ]
        },
        { path: "/user/:id", component: user }
    ]

})
new Vue({
    router,
    template: `
    <div id='r'>
      <h1>导航</h1>
      <ol>
        <li><router-link to="/a">home</router-link></li>
        <li><router-link to="/b">about</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="/user/:id">user</router-link></li>
      </ol>
      <router view class="asdfg"></router view>
    </div>
  `
}).$mount('#app')
export default router