Tenth 二级路由的配置

本例运用了二级路由，实现了一个页面中两个部分固定，中间页面可跳转的功能

1.创建项目，vue-router-template，注意项目名不能大写
2.更改config目录下index.js port:81
3.找到App.vue,修改代码

• App.vue

<template>
    <div id="app">
        <router-view />
    </div>
</template>

<script>
export default {
    name: 'App'
};
</script>

<style>
#app {
    width: 100%;
    background-color: #eee;
}
</style>

• 项目结构如图

  
  4.png

• Index.vue

<template>
    <div>
        <div class="header">
            <div class="nav">
                <router-link to="/index" class="logo">我的班课</router-link>
                <router-link to="/task">任务中心</router-link>
                <router-link to="/lib">库管理</router-link>
                <router-link to="/ucenter">个人中心</router-link>
                <router-link to="/sign">退出</router-link>
            </div>
        </div>
        <div class="content"><router-view /></div>
    </div>
</template>

<script>
export default {
    name: 'Index',
    data() {
        return {};
    }
};
</script>

<style>
.header {
    width: 100%;
    height: 80px;
    background-color: #fff;
    display: flex;
    align-items: center;
}
.nav{
    width: 80%;
    margin: 0 auto;
}
a{
    color: darkslategrey;
    font-size: 18pt;
    text-decoration: none;
    margin-right: 50px;
}
a:hover{
    color: rgb(0, 187, 221);
}
.logo{
    margin-right: 50%;
}
.content {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    height: 600px;
}
</style>

• Lib.vue

<template>
    <div class="container">
        <div class="content"><router-view /></div>
        <div class="side-bar">
            <router-link to="/lib_exam">题库</router-link>
            <router-link to="/lib_resources">资源库</router-link>
            <router-link to="/lib_activity">活动库</router-link>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Lib',
    data() {
        return {
            
        };
    }
};
</script>

<style scoped>
    .container{
        display: flex;
        width: 90%;
        margin: 0 auto;
    }
    .content{
        flex: 1 1 80%;
        text-align:center;
        background-color: #fff;
        padding-bottom: 20px;
    }   
    
    a{
        margin-top: 30px;
    }
    .side-bar{
        display: flex;
        flex-direction: column;
        background-color: #fff;
        margin-top: 20px;
        margin-left: 20px;
        flex: 1 1 20%;
    }
</style>

• index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    mode: "history",
    routes: [{
            path: '/',
            redirect: 'index',
        },
        {
            //主页
            path: '/index',
            redirect: 'course',
            component: resolve => require(['../components/Index.vue'], resolve),
            meta: {
                title: '主页'
            },
            children: [{
                    //我的班课组件
                    path: '/course',
                    component: resolve => require(['../components/Course.vue'], resolve),
                    meta: {
                        title: '我的班课'
                    }
                },
                {
                    //任务中心
                    path: '/task',
                    component: resolve => require(['../components/Task.vue'], resolve),
                    meta: {
                        title: '任务中心'
                    }
                },
                {
                    //库管理
                    path: '/lib',
                    component: resolve => require(['../components/Lib.vue'], resolve),
                    meta: {
                        title: '库管理'
                    },
                    children:[
                        {
                            //题库
                            path:'/lib_exam',
                            component:resolve => require(['../components/LibExam.vue'],resolve),
                            meta:{
                                title:'题库'
                            }
                        },
                        {
                            //资源库库
                            path:'/lib_resources',
                            component:resolve => require(['../components/LibResources.vue'],resolve),
                            meta:{
                                title:'资源库'
                            }
                        },
                        {
                            //活动库
                            path:'/lib_activity',
                            component:resolve => require(['../components/LibActivity.vue'],resolve),
                            meta:{
                                title:'活动库'
                            }
                        }
                    ]
                },
                {
                    //班课详情组件
                    path: '/c/:id',
                    component: resolve => require(['../components/CourseDetail.vue'], resolve),
                    meta: {
                        title: '专题详情'
                    }
                },
                {
                    // 个人中心组件
                    path: '/ucenter',
                    // redirect: 'user_infomation',
                    component: resolve => require(['../components/UCenter.vue'], resolve),
                    meta: {
                        title: '个人中心'
                    },
                    children: [{
                            //我的信息
                            path: '/user_infomation',
                            component: resolve => require(['../components/UserInfomation.vue'], resolve),
                            meta: {
                                title: '我的信息'
                            }
                        },
                        {
                            //用户信息
                            path: '/user_profile',
                            component: resolve => require(['../components/UserProfile.vue'], resolve),
                            meta: {
                                title: '用户信息'
                            }
                        },
                        {
                            //账号安全
                            path: '/account_security',
                            component: resolve => require(['../components/AccountSecurity.vue'], resolve),
                            meta: {
                                title: '账号安全'
                            }
                        }
                    ]
                },
            ]
        },
        {
            // 注册登录
            path: '/sign',
            component: resolve => require(['../components/Sign.vue'], resolve),
            meta: {
                title: '注册登录'
            },
            children: [
                {
                    path: '/sign_in',
                    component: resolve => require(['../components/SignIn.vue'], resolve),
                    meta: {
                        title: '登录'
                    },
                },
                {
                    path: '/sign_up',
                    component: resolve => require(['../components/SignUp.vue'], resolve),
                    meta: {
                        title: '注册'
                    },
                }
            ]
        }
    ]
})

• 运行结果

  
  1.png

2.png 3.png

• 图中上面导航和右边导航都可以点击跳转使中间页面显示内容
• 详细代码请转https://github.com/wxy1027/vue-router-template