作用

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

例子

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

子路由的操作步骤

将这个页面的头部和导航栏部分的样式和风格,移到主路由上(<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>来进行引用

成功

结果

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