本例運(yùn)用了二級(jí)路由而昨，實(shí)現(xiàn)了一個(gè)頁(yè)面中兩個(gè)部分固定毫深，中間頁(yè)面可跳轉(zhuǎn)的功能
1.創(chuàng)建項(xiàng)目萄焦，vue-router-template，注意項(xiàng)目名不能大寫
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)如圖
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: '專題詳情'
}
},
{
// 個(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: '我的信息'
}
},
{
//用戶信息
path: '/user_profile',
component: resolve => require(['../components/UserProfile.vue'], resolve),
meta: {
title: '用戶信息'
}
},
{
//賬號(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é)果
