1. 먼저 router.js 파일에서 라우팅을 구성하고 사이드바에서 리디렉션해야 하는 모든 페이지를 자식으로 추가합니다.
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/project",
name: "projectGroup",
meta: {
requiresAuth: true,
title: "项目列表",
navBreadcrumb: [
{ label: "项目列表", name: "projectSample", link: true },
],
},
component: () => import("../views/project/Index.vue"),
children: [
{
path: "sample/:id",
name: "projectGroup:sample",
meta: {
requiresAuth: true,
title: "项目列表",
navBreadcrumb: [
{ label: "项目列表", name: "projectSample", link: true },
],
},
component: () => import("../views/project/Sample.vue"),
},
{
path: "alg/:id",
name: "projectGroup:alg",
meta: {
requiresAuth: true,
title: "项目列表",
navBreadcrumb: [
{ label: "项目列表", name: "projectSample", link: true },
],
},
component: () => import("../views/project/Alg.vue"),
},
],
},
],
});
2. 사이드바에서 이동할 페이지가 포함된 보기 디렉토리에 새 파일을 만듭니다.
3. 페이지 스타일 레이아웃
1. 사용자 지정 구성 요소 BaseLayout.vue 파일을 사용하여 머리글 및 옆 스타일 표시를 설정합니다.
<template>
<el-config-provider namespace="ep" :locale="zhCn">
//BaseHeader是我自己的定义的组件,为当前页面的头部
<div class="top-header">
<BaseHeader />
<div>
<user-avatar />
</div>
</div>
<div class="app-main" v-if="userInfo !== null">
//BaseSide 自定义组件,为当前页面的侧边栏
<div class="base-side-main" v-if="props.hasBaseSide"><BaseSide /></div>
<div
:class="['content-main', mainClass]"
:style="{ left: props.hasBaseSide ? '64px' : '0' }"
>
<slot></slot>
</div>
</div>
</el-config-provider>
</template>
요소 플러스에서 컨테이너 레이아웃 컨테이너를 사용할 수도 있습니다.
2. BaseHeader.vue 파일에는 비교적 간단한 페이지 헤더 스타일이 포함되어 있습니다.
<template>
<div class="top-nav-bar">
<div class="app-title">
<router-link :to="{ name: 'home' }"> 病理图像AI自训练中台 </router-link
><el-tag
effect="dark"
type="danger"
style="margin-left: 10px"
v-if="envMode === 'test'"
>
测试版
</el-tag>
</div>
<el-menu
class="el-menu-bar"
mode="horizontal"
:ellipsis="false"
:defaultActive="menuActive"
>
<el-menu-item index="3" @click="goPage('/dashboard')"
>控制台</el-menu-item
>
<el-menu-item index="1" @click="goPage('/alg')">我的算法</el-menu-item>
<el-menu-item index="2" @click="goPage('/market')">应用市场</el-menu-item>
<el-menu-item index="4" @click="goPage('/project')"
>项目列表</el-menu-item
>
</el-menu>
</div>
</template>
3. BaseSide.vue 파일 내부에는 사이드바 스타일이 있습니다. 여기가 핵심입니다! ! ! 다음은 페이지 라우팅 점프 설정입니다.
<template>
<el-menu
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<div v-for="i in listProject?.ListProjectByTenant" :key="i.id">
//因为我的侧边栏数据是需要动态获取的,所以这里的index不能相同,否则几个侧边栏会同时展开时
<el-sub-menu :index="i">
<template #title>{
{ i.name }}</template>
<el-menu-item index="alg">
//这里使用<router-link>,通过属性to来进行跳转,里面的name就是刚才在router.js文件中设置的,params这里包含的是路由跳转时传递的参数
<router-link
:to="{
name: 'projectGroup:alg',
params: { id: i.id, name: i.name },
}"
>算法</router-link
>
</el-menu-item>
<el-menu-item index="sample"
><router-link
:to="{
name: 'projectGroup:sample',
params: { id: i.id, name: i.name },
}"
>样本</router-link
></el-menu-item
>
</el-sub-menu>
</div>
</el-menu>
</template>
4. 지금 막 index.vue 파일에 구성요소를 도입합니다.
<template>
//因为我的数据是动态获取,所以要先判断一下是否有数据,有数据再显示侧边栏
<BaseLayout :hasBaseSide="isProjectLoaded && projectListData.length">
<PaddingLayout>
<el-card class="table-card" shadow="never">
<router-view></router-view>
</el-card>
</PaddingLayout>
</AlgProjectLayout>
</template>
스타일은 다음과 같습니다.