本例运用了二级路由，实现了一个页面中两个部分固定，中间页面可跳转的功能
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
