路由 - vue二级路由 - 《vue》

vue-router.js
<body>
    <!-- 步骤一: 在vue之后导入vue-router路由插件 -->
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <script src="./vue-router.js"></script>
    <div id='myApp'>
        <!-- 步骤二: 在根组件模板中,添加路由跳转标签 -->
        <router-link to="/">主页</router-link> |
        <router-link to="/list">列表</router-link> |
        <router-link to="/user">个人</router-link>
        <!-- 步骤六: 在根组件模板中, 添加路由出口: 路由组件渲染的位置 -->
        <router-view></router-view>
    </div>
    <!-- 列表页的组件模板 -->
    <template id="listTem">
        <div>
            <router-link to="/rank">段位排行榜</router-link>|
            <router-link to="/list/power">战力排行榜</router-link>|
            <router-link to="/score">积分排行榜</router-link>
            <!-- 二级路由的路由出口 -->
            <router-view></router-view>
        </div>
    </template>
    <script>
        // 步骤三: 创建路由控制分发跳转的组件
        var MainPage = Vue.component("mainCom", {template: "<h1>这是主页</h1>"});
        var ListPage = Vue.component("listCom", {template: "#listTem"});
        var UserPage = Vue.component("userCom", {template: "<h1>这是用户页</h1>"});
        var RankPage = Vue.component("rankCom", {template: "<h1><ol><li>这是段位列表</li></ol></h1>"});
        var PowerPage = Vue.component("powerCom", {template: "<h1><ol><li>这是战力列表</li></ol></h1>"});
        var ScorePage = Vue.component("scoreCom", {template: "<h1><ol><li>这是积分列表</li></ol></h1>"});
        // 步骤四: 创建路由对象,配置路由信息
        const router = new VueRouter({
            routes:[
                {path: "/", component: MainPage},
                {
                    path: "/list", 
                    component: ListPage,
                    // 配置二级路由
                    children: [
                        {path: "/rank", component: RankPage},
                        // 二级路不加/时,使用一级路由调用 /list/power
                        {path: "power", component: PowerPage},
                        {path: "/score", component: ScorePage},
                        {path: "/", redirect: '/rank'}
                    ]
                },
                {path: '/user', component: UserPage}
            ]
        })
        new Vue({
            el: '#myApp',
            // 步骤五: 把路由对象加入vue对象中
            router,
            data: {}
        })
    </script>
</body>