### 修改 RuoYi 框架以隐藏面包屑导航中的首页 在 RuoYi 框架中,要实现隐藏面包屑导航的首页部分,主要涉及前端页面和配置文件的调整。具体来说,在 `src/views/layout/components/Breadcrumb.vue` 文件内修改逻辑可以达到目的。 为了隐藏首页链接,可以在遍历路由生成面包屑的过程中加入条件判断,过滤掉不需要显示的路径项: ```javascript // src/views/layout/components/Breadcrumb.vue <template> <el-breadcrumb separator="/"> <transition-group name="breadcrumb"> <!-- 过滤掉不希望展示的首页 --> <span v-for="(item, index) in levelList.filter(item => item.meta.title !== 'Dashboard')" :key="index"> <el-breadcrumb-item v-if='item.redirect === "noRedirect" || index == levelList.length - 1' > {{ generateTitle(item.meta.title) }} </el-breadcrumb-item> <router-link v-else to="/dashboard">{{ generateTitle(item.meta.title) }}</router-link> </span> </transition-group> </el-breadcrumb> </template> <script> export default { data() { return { levelList: null, }; }, } </script> ``` 通过上述代码片段可见,当渲染面包屑组件时,会排除任何带有 `"Dashboard"` 标签名称的项目[^1]。这通常对应于应用内的首页或仪表板视图。 另外一种方法是在菜单定义处设置特定属性来控制是否应在面包屑中显示该节点。例如给首页对应的路由对象增加 `hiddenBreadcrumb: true` 属性,并相应地更新面包屑构建逻辑以便识别并跳过这些标记过的条目。 (责任编辑:) |