Construction of the main page of the Vue project three projects
foreword
In Vue project 2, what is completed is the implementation of project registration and login logic. When we log in successfully, the page will jump to the page with the route path: "/". Under this route, we will proceed to the project main page build.
Implementation of Vue two login registration function
1. Overall layout analysis of the project
The overall project adopts the common layout of the background management system, that is, the upper layout is the header layout, the lower left layout is the navigation layout, and the lower right layout is the information list display layout. as the picture shows.
2. Page building steps
1. Build the main display page
The page displayed by the main body is when the route of the page jumps after we successfully log in to realize the display of the main content. The route jumps from "/login" to "/". Since "/" displays HelloWorld.vue in the project creation, we create a Layout.vue file under the components file to realize the construction of the page under the "/" route.
Routing file changes configure index.vue under the router folder
{
path:"/",
name:"layout",
component:Layout,
},
layout.view
<template>
<div>
<div class="header"></div>
<div class="navbar"></div>
<div class="main"></div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
components: {
},
methods: {
},
};
</script>
<style>
.header {
position: absolute;
line-height: 50px;
padding: 0px;
top: 0px;
left: 0px;
right: 0px;
background-color: #2d3a4b;
}
/* 左侧导航栏 */
.navbar {
position: absolute;
width: 230px;
top: 50px;
left: 0px;
bottom: 0px;
overflow-y: auto;
background-color: #545c64;
}
/* 右侧主区域 */
.main {
position: absolute;
top: 50px;
left: 230px;
right: 0px;
bottom: 0px;
padding: 10px;
overflow-y: auto;
}
</style>
2. Extract the div as a child component storage
We need to style these three layout components. If they are put together, it is inconvenient to manage, so we create AppHeader, AppMain, and AppNavbar in components to store the three layouts. Create index.vue under these three folders. Extract the div of Layout.vue.
Note: Import and register in layout, and use it at the end.
Then the Layout.vue code is as follows:
<template>
<div>
<app-header></app-header>
<app-navbar></app-navbar>
<app-main></app-main>
</div>
</template>
<script>
import AppHeader from "./AppHeader";
import AppNavbar from "./AppNavbar";
import AppMain from "./AppMain";
export default {
data() {
return {
};
},
components: {
AppHeader,
AppNavbar,
AppMain,
},
methods: {
},
};
</script>
3. The layout of the header, left navigation and right list switching
3.1 Head layout implementation
The header layout mainly displays the name of the project, and the right side implements the functions of modifying the password and logging in.
AppHeader
<template>
<div class="header">
</div>
</template>
Analysis: The title on the left is a picture plus text, so apply img and span, click this tag to return to the home page, so wrap these two things with a tag.
<a href="#">
<img src="@/assets/logo.png" width="25px" class="logo" />
<span class="title">学堂</span>
</a>
The drop-down form on the right can be implemented with the ElementUI component library.
Dropdown drop-down menu
We choose the command event in the drop-down menu to realize our right layout. 
Drop-down form on the right side of the header
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
admin<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">修改密码</el-dropdown-item>
<el-dropdown-item command="b">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
form validation method
methods: {
handleCommand(command) {
this.$message("click on item " + command);
}
}
Head css layout
<style scoped>
.logo {
vertical-align: middle;
padding: 0 10px 0 40px;
}
.title {
color: white;
position: absolute;
}
.el-dropdown {
float: right;
margin-right: 40px;
}
.el-dropdown-link {
color: #409EFF;
cursor: pointer;
}
</style>
3.2 left navigation component implementation
NavMenu Navigation Menu
AppNavbar
<template>
<div class="navbar">
<el-menu
:router="true"
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item index="/home">
<i class="el-icon-s-home"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item index="/teacher/">
<i class="el-icon-user-solid"></i>
<span slot="title">教师管理</span>
</el-menu-item>
<el-menu-item index="/student/">
<i class="el-icon-s-cooperation"></i>
<span slot="title">学生管理</span>
</el-menu-item>
</el-menu>
</div>
</template>
:router="true" enables the routing function, then the index specifies the routing address, and the default-active menu is selected by default, and the selected menu is yellow.
Here we have written the route, so we need to configure the route in index.js under router.
import Vue from "vue";
import VueRouter from "vue-router";
// import Register from "../views/register"
import Register from "../views/register";
import Login from "../views/login";
import Home from "../views/home";
import Teacher from "../views/teacher";
import Student from "../views/student"
import Layout from "../components/Layout.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/register",
name: "register",
component: Register,
},
{
path: "/login",
name: "login",
component: Login,
},
{
path:"/",
name:"layout",
component:Layout,
redirect:"/home",
children:[
{
path: "/home",
component: Home,
meta:{
title:'首页'}
},
// {
// path: "/teacher",
// component: Teacher,
// meta:{title:'教师管理'}
// },
]
},
{
path:"/teacher",
component:Layout,
children:[
{
path:"/",
component:Teacher,
meta:{
title:'教师管理'}
}
]
},
{
path:"/student",
component:Layout,
children:[
{
path:"/",
component:Student,
meta:{
title:"学生管理"}
}
]
}
];
const router = new VueRouter({
// mode: "history",
base: process.env.BASE_URL,
routes,
});
export default router;
Here we configure the routes of the home page, teacher list and student list, and import these components through import in the index.js file.
And create home, teacher, student under views
3.3 Switch content display in the right list
On the right side, the content on the right side also changes when the left route is switched. The head on the right side uses the Breadcrumb breadcrumbs of the ElementUI form to realize horizontal route navigation. Then there is the presentation of the content.
AppMain
<template>
<div>
<div class="main">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: $route.path }" class="line">{
{
$route.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
<router-view></router-view>
</div>
</div>
</template>
For the convenience of management, we extract the el-breadcrumb horizontal navigation route as a subcomponent of AppMain, and create an AppLink to save
AppLink.vue
<template>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: $route.path }" class="line">{
{
$route.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script>
export default {
data() {
return {
};
},
components: {
},
methods: {
},
};
</script>
<style scoped>
.el-breadcrumb{
height: 10px;
padding:20px;
border-radius:4px;
box-shadow:0px 2px 3px 0px black;
}
.line{
border-left:10px solid greenyellow;
padding-left:10px;
}
</style>
index.vue under AppMain after extraction
<template>
<div>
<div class="main">
<app-link v-show = "$route.path !='/home'"></app-link>
<router-view></router-view>
</div>
</div>
</template>
<script>
import AppLink from './AppLink.vue';
export default {
data() {
return {
};
},
components: {
AppLink},
methods: {
},
};
</script>
<style scoped>
</style>
The v-show added here is to not display the horizontal navigation route when the route is /home (v-show=false).
Summarize
This chapter mainly writes about the implementation of the project page layout function, which is divided into the implementation of the header, left navigation and right switching list.