本例運(yùn)用了二級(jí)路由，實(shí)現(xiàn)了一個(gè)頁(yè)面中兩個(gè)部分固定，中間頁(yè)面可跳轉(zhuǎn)的功能

1.創(chuàng)建項(xiàng)目，vue-router-template，注意項(xiàng)目名不能大寫(xiě)
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>

• 項(xiàng)目結(jié)構(gòu)如圖

  image

• Index.vue

<template>
    <div>
        <div class="header">
            <div class="nav">
                <router-link to="/index" class="logo">我的班課</router-link>
                <router-link to="/task">任務(wù)中心</router-link>
                <router-link to="/lib">庫(kù)管理</router-link>
                <router-link to="/ucenter">個(gè)人中心</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

    <div class="container">
        <div class="content"><router-view /></div>
        <div class="side-bar">
            <router-link to="/lib_exam">題庫(kù)</router-link>
            <router-link to="/lib_resources">資源庫(kù)</router-link>
            <router-link to="/lib_activity">活動(dòng)庫(kù)</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',
        },
        {
            //主頁(yè)
            path: '/index',
            redirect: 'course',
            component: resolve => require(['../components/Index.vue'], resolve),
            meta: {
                title: '主頁(yè)'
            },
            children: [{
                    //我的班課組件
                    path: '/course',
                    component: resolve => require(['../components/Course.vue'], resolve),
                    meta: {
                        title: '我的班課'
                    }
                },
                {
                    //任務(wù)中心
                    path: '/task',
                    component: resolve => require(['../components/Task.vue'], resolve),
                    meta: {
                        title: '任務(wù)中心'
                    }
                },
                {
                    //庫(kù)管理
                    path: '/lib',
                    component: resolve => require(['../components/Lib.vue'], resolve),
                    meta: {
                        title: '庫(kù)管理'
                    },
                    children:[
                        {
                            //題庫(kù)
                            path:'/lib_exam',
                            component:resolve => require(['../components/LibExam.vue'],resolve),
                            meta:{
                                title:'題庫(kù)'
                            }
                        },
                        {
                            //資源庫(kù)庫(kù)
                            path:'/lib_resources',
                            component:resolve => require(['../components/LibResources.vue'],resolve),
                            meta:{
                                title:'資源庫(kù)'
                            }
                        },
                        {
                            //活動(dòng)庫(kù)
                            path:'/lib_activity',
                            component:resolve => require(['../components/LibActivity.vue'],resolve),
                            meta:{
                                title:'活動(dòng)庫(kù)'
                            }
                        }
                    ]
                },
                {
                    //班課詳情組件
                    path: '/c/:id',
                    component: resolve => require(['../components/CourseDetail.vue'], resolve),
                    meta: {
                        title: '專(zhuān)題詳情'
                    }
                },
                {
                    // 個(gè)人中心組件
                    path: '/ucenter',
                    // redirect: 'user_infomation',
                    component: resolve => require(['../components/UCenter.vue'], resolve),
                    meta: {
                        title: '個(gè)人中心'
                    },
                    children: [{
                            //我的信息
                            path: '/user_infomation',
                            component: resolve => require(['../components/UserInfomation.vue'], resolve),
                            meta: {
                                title: '我的信息'
                            }
                        },
                        {
                            //用戶(hù)信息
                            path: '/user_profile',
                            component: resolve => require(['../components/UserProfile.vue'], resolve),
                            meta: {
                                title: '用戶(hù)信息'
                            }
                        },
                        {
                            //賬號(hào)安全
                            path: '/account_security',
                            component: resolve => require(['../components/AccountSecurity.vue'], resolve),
                            meta: {
                                title: '賬號(hào)安全'
                            }
                        }
                    ]
                },
            ]
        },
        {
            // 注冊(cè)登錄
            path: '/sign',
            component: resolve => require(['../components/Sign.vue'], resolve),
            meta: {
                title: '注冊(cè)登錄'
            },
            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: '注冊(cè)'
                    },
                }
            ]
        }
    ]
})

• 運(yùn)行結(jié)果

  image

image

image