vue3.0+element Plus实现页面布局侧边栏菜单路由跳转功能
一. 先在router.js文件中配置路由,将侧边栏中需要跳转的页面都添加到children中
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"), }, ], }, ], });
二. 在view目录下新建一个文件,里面包含侧边栏要跳转的页面
三. 页面样式布局
1. 我选择使用自定义组件BaseLayout.vue文件来设置header和aside样式显示
<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>
也可以使用element plus中的Container 布局容器
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>
四. 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>
样式如下:
到此这篇关于vue3.0+element Plus实现页面布局侧边栏菜单路由跳转功能的文章就介绍到这了,更多相关vue3.0 element Plus侧边栏菜单路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
在vue+element ui框架里实现lodash的debounce防抖
今天小编就为大家分享一篇在vue+element ui框架里实现lodash的debounce防抖,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11electron-vue中报错Cannot use import statement outside a m
Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架,下面这篇文章主要给大家介绍了关于electron-vue中报错Cannot use import statement outside a module的解决方案,需要的朋友可以参考下2023-02-02vue中$nexttick,$set,$forceupdate的区别
本文主要介绍了vue中$nexttick,$set,$forceupdate的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-07-07vue3深入学习 nextTick和historyApiFallback
这篇文章主要介绍了vue3深入学习 nextTick和historyApiFallback,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下2022-08-08
最新评论