先定义模板

<template id="basic">
        <div>
            <h3>很喜欢你</h3>
            <p>变傻了</p>
        </div>
    </template>
    <template id="superme">
        <div>
            <h3>超级喜欢你</h3>
            <p>变蠢了</p>
        </div>
    </template>

创建组件

const basic=Vue.extend({
            template:'#basic'
        })
        const superme=Vue.extend({
            template:'#superme'
        })

定义路由

const routes=[
            {
                path:'/a',
                component:a,
                children:[
                    {path:'basic',component:basic},//注意这边的path不需要加'/'
                    {path:'superme',component:superme},
                    {path:'/',redirect:'basic'},
                ]
            },
            {path:'/b',component:b},
            {path:'/c',component:c},
            {path:'/',redirect:'/a'},
        ]

创建路由实例并挂载

//创建路由实例
        const router=new VueRouter({
            routes
        });
        //创建vuue的实例并挂载
        let app=new Vue({
            router
        }).$mount('#app');

html的写法

<div id="app">
        <div class="row">
            <div class="col-md-3 col-md-offset-2" >
                <div class="list-group">
                    <router-link class="list-group-item" to='/a'>a</router-link>
                    <router-link class="list-group-item" to='/b'>b</router-link>
                    <router-link class="list-group-item" to='/c'>c</router-link>
                </div>
            </div>
            <div class="col-md-5"> 
                <div class="panel">
                    <div class="router-body">
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <template id="a">
        <div>
            <h1>xiaozhang</h1>
            <p>学习真是太有趣了</p>
            <div>
                <ul class="nav nav-tabs">
                    <router-link to="/a/basic">基础</router-link>
                    <router-link to="/a/superme">超级</router-link>

                </ul>   
                            
            </div>
            <div class="tab-content">
                    <router-view></router-view>
                </div>
        </div>
    </template>