一、二级路由的配置

Vue.js 加vue-router 创建单页应用配置组件和路由映射，vue-router 渲染。

    <div class="box">
        <div class="nav">
            <ul>
                <!-- <router-link>一级路由组件来导航，to跳转路径，页面自动渲染成<a> -->
                <li class="ac"><router-link to='/home'>首页</router-link></li>
                <li><router-link to='/course'>课程</router-link></li>
                <li><router-link to='/way'>路径</router-link></li>
                <li><router-link to='/practice'>训练营</router-link></li>
            </ul>
        </div>

        <div class="content">
            <router-view></router-view>
        </div>

    </div>

    <!-- 一级路由模板 -->
    <template id="h">
        <div>
            <h3>首页内容</h3>
        </div>
    </template>
    <template id="c">
        <div>
            <h3>课程内容</h3>
            <ul class="subnav">
                <!-- <router-link>二级路由组件来导航，to跳转路径，页面自动渲染成<a> -->
                <li><router-link to='/course/allcourse'>全部课程</router-link></li>
                <li><router-link to='/course/online'>即将上线</router-link></li>
                <li><router-link to='/course/develop'>开发</router-link></li>
            </ul>           
            <div class="container">
             <!-- 路由出口，路由匹配到的组件将渲染在这里 -->
                <router-view></router-view>
            </div>
        </div>
    </template>
    <template id="w">
        <div>
            <h3>路径内容</h3>
        </div>
    </template>
    <template id="p">
        <div>
            <h3>训练营内容</h3>
        </div>
    </template>

    <!-- 二级路由模板 -->
    <template id="t"><div><p>我的全部课程</p></div></template>
    <template id="o"><div><p>即将上线的课程</p></div></template>
    <template id="d"><div><p>开发依赖</p></div></template>

<script>
 // 定义（路由）组件。可以从其他文件 import 进来
var Home = { template:"#h" }
var Course = { template:"#c" }
var Way = { template:"#w" }
var Practice = { template:"#p" }
var Allcourse = { template:"#t" } 
var Oneline = { template:"#o" } 
var Develop = { template:"#d" } 

var routes = [
    { path:"/home",component:Home },
    { path:"/course",component:Course,
        //二级路由配置
        children:[
            { path:"allcourse",component:Allcourse },
            { path:"online",component:Oneline },
            { path:"develop",component:Develop }
        ]
     },
    { path:"/way",component:Way },
    { path:"/practice",component:Practice }
]

var router = new VueRouter({
    routes,
})

//刷新调转的模块
router.push("/home")

 // 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
new Vue({
    el: ".box",
    data: {},
    router
})
</script>