【web应用】若依框架：若依框架中的面包屑导航与顶部导航栏：设计与实现

---

前言

在现代化的Web应用开发中，用户体验和界面设计的合理性越来越受到重视。若依（RuoYi）框架作为一款基于Spring Boot和Vue.js的快速开发框架，提供了丰富的UI组件和布局方案，其中面包屑导航和顶部导航栏是提升用户体验的重要元素。本文将深入探讨若依框架中这两个组件的设计与实现。

一、面包屑导航（Breadcrumb）

1. 什么是面包屑导航？

面包屑导航是一种显示用户在网站或应用中位置的导航工具，通常以层级结构展示，帮助用户理解当前页面在整个网站中的位置，并提供快速返回上级页面的功能。

2. 若依中的实现

在若依框架中，面包屑导航通常位于页面顶部，紧接在顶部导航栏下方。它基于Element UI的el-breadcrumb组件实现，通过解析路由配置动态生成。

路由配置示例：

{path: '/example',component: Example,meta: {title: '示例页面',breadcrumb: [{ path: '/home', title: '首页' },{ path: '/example', title: '示例页面' }]}
}

布局组件中的渲染：

<template><el-breadcrumb separator="/"><el-breadcrumb-item v-for="item in breadcrumbList" :key="item.path">{{ item.title }}</el-breadcrumb-item></el-breadcrumb>
</template>

3. 自定义与扩展

• 隐藏面包屑：在路由配置中设置meta.breadcrumb: false。
• 动态生成：根据业务逻辑动态生成面包屑数据。
• 样式调整：通过CSS覆盖默认样式，或使用Element UI的主题定制功能。

二、顶部导航栏（Navbar）

1. 什么是顶部导航栏？

顶部导航栏是应用界面顶部的水平栏，通常包含应用Logo、主要导航链接、用户信息和操作按钮等。它是用户访问应用功能的主要入口。

2. 若依中的实现

若依框架的顶部导航栏是一个独立的Vue组件（Navbar.vue），位于src/layout/components/目录下。它包含以下核心功能：

• 系统Logo与名称：展示应用的品牌标识。
• 用户菜单：提供个人中心、退出登录等操作。
• 多标签页支持：可选的TagsView组件，方便用户切换已打开的页面。

组件结构示例：

<template><div class="navbar"><div class="logo">全工序信息化系统</div><div class="right-menu"><el-dropdown><span class="el-dropdown-link"><i class="el-icon-user"></i> 用户名<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu><el-dropdown-item @click.native="toProfile">个人中心</el-dropdown-item><el-dropdown-item @click.native="logout">退出登录</el-dropdown-item></el-dropdown-menu></el-dropdown></div></div>
</template>

3. 自定义与扩展

• 添加功能按钮：在right-menu中添加搜索、通知等按钮。
• 样式调整：修改.navbar的CSS样式，如高度、背景色、阴影等。
• 响应式设计：使用媒体查询适配不同屏幕尺寸。

三、最佳实践

1. 保持一致性

• 面包屑导航和顶部导航栏的设计应与整体应用风格保持一致。
• 导航结构应清晰，避免层级过深。

2. 响应式设计

• 确保导航栏在小屏幕设备上能够正常显示和操作。
• 可以考虑在小屏幕上隐藏某些非核心功能。

3. 用户体验优化

• 面包屑导航应准确反映页面层级，避免误导用户。
• 顶部导航栏的用户菜单应包含常用操作，减少用户操作步骤。

四、示意图与源码

layout-components文件夹下

1、Breadcrumb/index.vue

<template><el-breadcrumb class="app-breadcrumb" separator="/"><transition-group name="breadcrumb"><el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"><span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span><a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a></el-breadcrumb-item></transition-group></el-breadcrumb>
</template><script setup>
const route = useRoute();
const router = useRouter();
const levelList = ref([])function getBreadcrumb() {// only show routes with meta.titlelet matched = route.matched.filter(item => item.meta && item.meta.title);const first = matched[0]// 判断是否为首页if (!isDashboard(first)) {matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched)}levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
}
function isDashboard(route) {const name = route && route.nameif (!name) {return false}return name.trim() === 'Index'
}
function handleLink(item) {const { redirect, path } = itemif (redirect) {router.push(redirect)return}router.push(path)
}watchEffect(() => {// if you go to the redirect page, do not update the breadcrumbsif (route.path.startsWith('/redirect/')) {return}getBreadcrumb()
})
getBreadcrumb();
</script><style lang='scss' scoped>
.app-breadcrumb.el-breadcrumb {display: inline-block;font-size: 14px;line-height: 20px;margin-left: 8px;.no-redirect {color: #97a8be;cursor: text;}
}
</style>

2、navbar

<template><div class="navbar"><hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /><breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" /><top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /><div class="right-menu"><template v-if="appStore.device !== 'mobile'"><header-search id="header-search" class="right-menu-item" /><!--        <el-tooltip content="源码地址" effect="dark" placement="bottom"><ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /></el-tooltip><el-tooltip content="文档地址" effect="dark" placement="bottom"><ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" /></el-tooltip>--><screenfull id="screenfull" class="right-menu-item hover-effect" /><el-tooltip content="布局大小" effect="dark" placement="bottom"><size-select id="size-select" class="right-menu-item hover-effect" /></el-tooltip></template><div class="avatar-container"><el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click"><div class="avatar-wrapper"><img :src="userStore.avatar" class="user-avatar" /><el-icon><caret-bottom /></el-icon></div><template #dropdown><el-dropdown-menu><router-link to="/user/profile"><el-dropdown-item>个人中心</el-dropdown-item></router-link><el-dropdown-item command="setLayout" v-if="settingsStore.showSettings"><span>布局设置</span></el-dropdown-item><el-dropdown-item divided command="logout"><span>退出登录</span></el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></div></div>
</template><script setup>
import { ElMessageBox } from 'element-plus'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import HeaderSearch from '@/components/HeaderSearch'
import RuoYiGit from '@/components/RuoYi/Git'
import RuoYiDoc from '@/components/RuoYi/Doc'
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()function toggleSideBar() {appStore.toggleSideBar()
}function handleCommand(command) {switch (command) {case "setLayout":setLayout();break;case "logout":logout();break;default:break;}
}function logout() {ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {userStore.logOut().then(() => {location.href = '/index';})}).catch(() => { });
}const emits = defineEmits(['setLayout'])
function setLayout() {emits('setLayout');
}
</script><style lang='scss' scoped>
.navbar {height: 40px;top:60px;overflow: hidden;position: relative;//background: #fff;background-color: transparent;z-index:1;//background-image: url(@/assets/images/title.png);.hamburger-container {line-height: 46px;height: 100%;float: left;cursor: pointer;transition: background 0.3s;-webkit-tap-highlight-color: transparent;&:hover {background: rgba(0, 0, 0, 0.025);}}.breadcrumb-container {float: left;}.topmenu-container {position: absolute;left: 50px;}.errLog-container {display: inline-block;vertical-align: top;}.right-menu {float: right;height: 100%;line-height: 50px;display: flex;&:focus {outline: none;}.right-menu-item {display: inline-block;padding: 0 8px;height: 100%;font-size: 18px;color: #5a5e66;vertical-align: text-bottom;&.hover-effect {cursor: pointer;transition: background 0.3s;&:hover {background: rgba(0, 0, 0, 0.025);}}}.avatar-container {margin-right: 40px;.avatar-wrapper {margin-top: 5px;position: relative;.user-avatar {cursor: pointer;width: 40px;height: 40px;border-radius: 10px;}i {cursor: pointer;position: absolute;right: -20px;top: 25px;font-size: 12px;}}}}
}
</style>

五、总结

若依框架通过面包屑导航和顶部导航栏提供了良好的用户体验基础。开发者可以根据具体业务需求，灵活调整这些组件的样式和功能，打造符合应用场景的界面。无论是简单的后台管理系统，还是复杂的企业级应用，合理利用这些导航组件都能显著提升用户的操作效率和满意度。

希望本文能帮助你更好地理解和使用若依框架中的导航组件，为你的项目增添光彩！