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

JosieBook2025-06-13 18:55

文章目录

前言

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

一、面包屑导航（Breadcrumb）

1. 什么是面包屑导航？

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

2. 若依中的实现

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

路由配置示例：
javascript 复制代码 
{
  path: '/example',
  component: Example,
  meta: {
    title: '示例页面',
    breadcrumb: [
      { path: '/home', title: '首页' },
      { path: '/example', title: '示例页面' }
    ]
  }
}
布局组件中的渲染：
vue 复制代码 
<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组件，方便用户切换已打开的页面。
组件结构示例：
vue 复制代码 
<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

c 复制代码 
<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.title
  let 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.name
  if (!name) {
    return false
  }
  return name.trim() === 'Index'
}
function handleLink(item) {
  const { redirect, path } = item
  if (redirect) {
    router.push(redirect)
    return
  }
  router.push(path)
}

watchEffect(() => {
  // if you go to the redirect page, do not update the breadcrumbs
  if (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

c 复制代码 
<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>

五、总结

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

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

热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02【图像处理与机器视觉】XJTU期末考点03KGG转MP3工具|非KGM文件|解密音频04零代码入门 | Coze——让大模型接入自己的数据库05海康Visionmaster-常见问题排查方法-启动阶段06YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】07扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解08从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！10DeepSeek各版本说明与优缺点分析