8.怎么配嵌套子路由,以及它的作用

作用

配嵌套子路由,就是可以通过同一个页面,让不同的位置发生变化,其他的位置不会发生变化,而做到一个局部刷新

例子

红线框住的部分,头部和导航栏是不会发生变化的,变化的只有中间的内容

子路由的操作步骤

将这个页面的头部和导航栏部分的样式和风格,移到主路由上(<template>和<scripe>),将内容部分移到子路由

主路由页面

<script>
import {defineComponent} from 'vue'
import HeadMenu from "@/views/inc/HeadMenu.vue";
import SideMenu from "@/views/inc/SideMenu.vue";export default defineComponent({name: "Home",components: {SideMenu, HeadMenu}
})
</script><template><el-container><!-- 左侧菜单栏 --><el-aside class="el-aside" style="width: 200px"><SideMenu></SideMenu></el-aside><!-- 右侧主体内容 --><el-container><!-- 头部导航栏 --><el-header class="header"><HeadMenu></HeadMenu></el-header><!-- 主要内容区域 --><el-main class="main"><router-view></router-view></el-main></el-container></el-container>
</template>
<script>
import SideMenu from "./inc/SideMenu.vue";
import HeadMenu from "./inc/HeadMenu.vue";export default {name: "Home",components: {SideMenu,HeadMenu}};
</script><style >
.el-aside {background-color: #D3DCE6;color: #333;text-align: left; /* 将文本向左对齐 */line-height: 60px; /* 菜单项垂直对齐 */height: 100%; /* 设置高度为父容器 el-container 的高度 */display: flex; /* 使用 Flex 布局 */flex-direction: column; /* 垂直布局 */
}.el-menu-vertical-demo {flex: 1; /* 菜单项占据 el-aside 的剩余空间 */overflow-y: auto; /* 如果内容过多，显示滚动条 */width: 200px;
}.el-container {padding: 0;margin: 0;height: 100vh; /* 设置整体容器高度为视窗高度 */
}.el-header {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;
}.el-main {color: #333;text-align: center;line-height: 160px;
}</style>

我这里是进行了一个页面的抽取

子路由页面

<template>
<div>main</div>
</template>
<script>
import SideMenu from "./inc/SideMenu.vue";
import HeadMenu from "./inc/HeadMenu.vue";export default {name: "index",components: {}};
</script>
<style scoped></style>

配置路由

  {path: '/',name: 'Home',component: () => import( '../views/Home.vue'),children: [{path: '/index',name: 'index',component: () => import( '../views/index.vue')}],},

相当于它还是同一个页面,只是里面进行了一个嵌套

这个时候页面还没有反应,因为没有引用

引用

      <!-- 主要内容区域 --><el-main class="main"><router-view></router-view></el-main>

使用<router-view></router-view>来进行引用

成功

结果

这样就可以做到在不创建新页面的情况下,使用同一个页面完成局部刷新