建筑业招聘网站苏州惊天网站制作网
作用
配嵌套子路由,就是可以通过同一个页面,让不同的位置发生变化,其他的位置不会发生变化,而做到一个局部刷新
例子
红线框住的部分,头部和导航栏是不会发生变化的,变化的只有中间的内容
子路由的操作步骤
将这个页面的头部和导航栏部分的样式和风格,移到主路由上(<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>来进行引用
成功
结果
这样就可以做到在不创建新页面的情况下,使用同一个页面完成局部刷新