Vue implementa enrutamiento anidado

El enrutamiento anidado, también conocido como subenrutamiento, generalmente se compone de múltiples capas de componentes anidados en aplicaciones prácticas. De manera similar, cada segmento del paisaje vial dinámico en la URL también corresponde a cada capa de componentes anidados de acuerdo con una determinada estructura. Por ejemplo, veamos el tutorial del sitio web oficial de Vue.

Cuando hacemos clic en el elemento de la izquierda, sabemos que las dos barras de navegación de la izquierda y arriba no cambiarán. Lo único que ha cambiado es el área de la derecha. Ponemos el ratón sobre una etiqueta, podemos ver que es una ruta. O deberíamos decir, es un sub-enrutador. A continuación, hablemos de cómo implementar esta función de subenrutamiento.

Vayamos a ElemetUI y elijamos uno. Elegí el siguiente

código, su código correspondiente es el siguiente: podemos escribirlo en nuestro archivo Main.vue (fue ligeramente modificado por mí, después de todo, solo estamos aprendiendo y no necesitamos usar tanto) .

<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>

Después de escribir, podemos escribir nuestra subruta de acuerdo con la ruta de la subruta escrita anteriormente.
Primero cree un nuevo directorio de estudiantes y luego escriba dos archivos Vue, uno se llama Grade.vue y el otro se llama Register.vue.

Simplemente escriba un div y exporte el contenido, de la siguiente manera:

Luego vaya a la ruta para importar y registrarse.
Tenga en cuenta que aquí está agregando niños a la página de inicio y luego agregando nuestra ruta.

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,
				}
			]
		}
	]
})

Después de eso, podemos hacer clic directamente para saltar a nuestra subruta.
Haga clic en Administración de calificaciones de estudiantes para mostrar

Haga clic en Administración de registro de estudiantes para mostrar: