Vue implements nested routing

Nested routing, also known as sub-routing, is usually composed of multiple layers of nested components in practical applications. Similarly, each segment of the dynamic road landscape in the URL also corresponds to each layer of nested components according to a certain structure. For example, let's see the Vue's official website tutorial.

When we click on the item on the left, we know that the two navigation bars on the left and above will not change. The only thing that has changed is the area on the right. Put the mouse on a label, we can see that it is a route. Or should we say, he is a sub-router. Next, let's talk about how to implement this sub-routing function.

Let's go to ElemetUI and choose one. I chose the following

code. Its corresponding code is as follows: we can write it in our Main.vue file (it was slightly modified by me, after all, we are just learning, and we don't need to use so much).

<template>
	<el-container style="height: 500px; border: 1px solid #eee">
		<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
			<!-- 菜单默认打开第一个 -->
			<el-menu :default-openeds="['1']">
				<!-- 索引表示他是左边导航栏的第几个 -->
				<el-submenu index="1">
					<!-- 这个是大的导航栏 -->
					<template slot="title"><i class="el-icon-message"></i>学籍管理</template>
					<!-- 这是大导航里面展开的小列表 -->
					<el-menu-item-group>
						<el-menu-item index="1-1">
							<!-- 子路由跳转 -->
							<router-link to="/student/grade">学生成绩管理</router-link>
						</el-menu-item>
						<el-menu-item index="1-2">
							<!-- 子路由跳转 -->
							<router-link to="/student/register">学生注册管理</router-link>
						</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="2">
					<!-- 这个是大的导航栏 -->
					<template slot="title"><i class="el-icon-message"></i>职员管理</template>
					<!-- 这是大导航里面展开的小列表 -->
					<el-menu-item-group>
						<el-menu-item index="2-1">教师信息管理</el-menu-item>
						<el-menu-item index="2-2">教师工资管理</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
			</el-menu>
		</el-aside>
		<el-container>
			<el-main>
				<!-- 让主体做子路由的显示 -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
    
    
		name: 'Main'
	}
</script>

<style>

</style>

After writing, we can write our sub-route according to the path of the sub-route written above.
First create a new student directory, and then write two Vue files, one is called Grade.vue and the other is called Register.vue.

Just write a div and export the content, as follows:

Then go to the route to import and register.
Note that here is adding children to the home page, and then adding our route.

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'
import Main from '../views/Main'
import Register from '../views/student/Register.vue'
import Grade from '../views/student/Grade.vue'

Vue.use(Router);

export default new Router({
    
    
	routes:[
		//登錄頁
		{
    
    
			path:'/login',
			name:'Login',
			component:Login
		},
		//主页
		{
    
    
			path:'/main',
			name:"Main",
			component:Main,
			children:[
				{
    
    
					path:'/student/register',
					name:"Register",
					component:Register,
				},
				{
    
    
					path:'/student/grade',
					name:"Grade",
					component:Grade,
				}
			]
		}
	]
})

After that, we can directly click to jump to our sub-route.
Click Student Grade Management to display

Click Student Registration Management to display: