1. Configure nested routing [function realization]
1. Open the official document of vue-router and find the nested routing part
For the unchanged part of the page, define it as an outer route, and for the changed part, define it as a sub route in children
The official sample code is as follows:
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})2. Create the main route: create Main.vue under the views folder
Configure the main route in index.js under the router folder
①Create the main routing file
②Rewrite the original route as a nested route [Note, sub-routes cannot bring /]
At this time, the routing exit of App.vue refers to the main routing, so it is also necessary to provide the routing exit of the sub-routing in the main routing Main.vue file [because the sub-routing will be displayed inside the main routing], open the Main.vue configuration route exit
3. Visit the page at this time, as shown in the figure below, the nested routing configuration is completed
2. Design the layout of the navigation bar based on the UI [beautiful style]
1. According to the UI diagram, go to the official website of element to find the corresponding container layout container
The UI style of this project is implemented based on the left navigation bar, top bar and middle content main. The official code is as follows:
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>Write the above code into the Main.vue main routing file, and write the original sub-routing exit into <el-main>
2. Register the left navigation bar component CommonAside.vue in the components folder under the src folder, select the style on the official website of element, and modify it according to the package properties of the official website document. The native style selected for this project is shown in the following figure:
The original code of the official website is as follows:
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<span slot="title">分组一</span>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>Rewrite the above code into the CommonAside.vue file, mainly pay attention to the writing method of the first-level menu and the second-level menu (the specific code after rewriting will be displayed later)
3. Introduce the left navigation bar in the main routing file Main.vue to realize the introduction, registration and use of CommonAside.vue components
4. Provide detailed instructions for the writing of the first-level menu and the second-level menu:
4.1 Write the data of the first-level menu and the second-level menu in the data part of the script to provide the data basis for subsequent data rendering, and define the array menuData to store the navigation bar data
①Level 1 menu data writing method
//一级菜单写法
{
path: '/teachingmanage',
name: 'teachingmanage',
label: '教研管理',
icon: 's-home',
url: 'TeachingManage/TeachingManage'
},②Level 2 menu data writing method
//二级菜单写法
{
label: '研修管理',
icon: 's-home',
children: [
{
path: '/coursecenter',
name: 'coursecenter',
label: '课程中心',
icon: 's-home',
url: 'StudyManage/CourseCenter'
},
{
path: '/questionbank',
name: 'questionbank',
label: '题库管理',
icon: 's-home',
url: 'StudyManage/QuestionBank'
},
]
},4.2 Define the method of judging whether there is a submenu or no menu in the compupted part of the script, laying the foundation for subsequent page rendering data
① There is no submenu, judge that the children of the item do not exist, and return the result
noChildren() {
return this.menuData.filter(item => !item.children)
},②If there is a submenu, just invert the judgment of no submenu
hasChildren() {
return this.menuData.filter(item => item.children)
}4.3 Render data on the page to realize the display of navigation bar data
①Level 1 menu page rendering data code:
<!-- 一级菜单 -->
<!-- index用于确定选中的菜单项，是唯一标识 -->
<!-- v-bind:(简写为:，用于属性绑定) -->
<el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :key="item.name" :index="item.name">
<!-- `el-icon-${item.icon}`与data中的数据绑定，实现动态拼接 -->
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{
{ item.label }}</span>
</el-menu-item>② Secondary menu page rendering data code:
<!-- 二级菜单 -->
<el-submenu v-for=" item in hasChildren" :key="item.label" index="item.label">
<!-- slot表示插槽 -->
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{
{ item.label }}</span>
</template>
<!-- 对子菜单进行渲染 -->
<el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
<el-menu-item @click="clickMenu(subItem)" :index="subItem.path">{
{ subItem.label }}</el-menu-item>
</el-menu-item-group>
</el-submenu>4.4 The complete code of the CommonAside.vue file is as follows:
<template>
<div>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
:collapse="isCollapse">
<!-- 一级菜单 -->
<!-- index用于确定选中的菜单项，是唯一标识 -->
<!-- v-bind:(简写为:，用于属性绑定) -->
<el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :key="item.name" :index="item.name">
<!-- `el-icon-${item.icon}`与data中的数据绑定，实现动态拼接 -->
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{
{ item.label }}</span>
</el-menu-item>
<!-- 二级菜单 -->
<el-submenu v-for=" item in hasChildren" :key="item.label" index="item.label">
<!-- slot表示插槽 -->
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{
{ item.label }}</span>
</template>
<!-- 对子菜单进行渲染 -->
<el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
<el-menu-item @click="clickMenu(subItem)" :index="subItem.path">{
{ subItem.label }}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
//控制导航栏为展开模式
isCollapse: false,
//存放导航栏数据
menuData: [
//一级菜单写法
{
path: '/teachingmanage',
name: 'teachingmanage',
label: '教研管理',
icon: 's-home',
url: 'TeachingManage/TeachingManage'
},
{
path: '/scientificmanage',
name: 'scientificmanage',
label: '科研管理',
icon: 's-home',
url: 'ScientificManage/ScientificManage'
},
//二级菜单写法
{
label: '研修管理',
icon: 's-home',
children: [
{
path: '/coursecenter',
name: 'coursecenter',
label: '课程中心',
icon: 's-home',
url: 'StudyManage/CourseCenter'
},
{
path: '/questionbank',
name: 'questionbank',
label: '题库管理',
icon: 's-home',
url: 'StudyManage/QuestionBank'
},
{
path: '/examinationpaper',
name: 'examinationpaper',
label: '试卷管理',
icon: 's-home',
url: 'StudyManage/ExaminationPaperManage'
},
{
path: '/trainingmanage',
name: 'trainingmanage',
label: '培训管理',
icon: 's-home',
url: 'StudyManage/TrainingManage'
},
]
},
//一级菜单写法
{
path: '/evalutionmanage',
name: 'evalutionmanage',
label: '评价管理',
icon: 's-home',
url: 'EvalutionManage/EvalutionManage'
},
{
path: '/supervisioncenter',
name: 'supervisioncenter',
label: '监管中心',
icon: 's-home',
url: 'SupervisionCenter/SupervisionCenter'
},
{
path: '/usermanage',
name: 'usermanage',
label: '用户管理',
icon: 's-home',
url: 'UserManage/UserManage'
},
]
}
},
methods: {
handleOpen() {
},
handleClose() {
}
},
computed: {
//没有子菜单,判断item的children不存在，并将结果return
noChildren() {
return this.menuData.filter(item => !item.children)
},
//有子菜单，与没有子菜单的判断取反即可
hasChildren() {
return this.menuData.filter(item => item.children)
}
}
}
</script>Run the project, open the page, and find that the menu data in the navigation bar has been rendered successfully [note, in order to illustrate the content in el-main, home is typed in the url address bar when the following figure is displayed]
The specific modifications to the navigation bar style will be introduced in the next section