vue+ elementui 实现面包屑的多级嵌套

最新推荐文章于 2024-01-15 14:54:53 发布
原创 最新推荐文章于 2024-01-15 14:54:53 发布 · 4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文分享了将原有两级面包屑组件升级为多级的实践经验，通过在Vue路由的meta属性中配置动态值，避免了使用Vuex或localStorage带来的刷新问题和额外开销，实现了高效的数据传递。

最近有个功能是将原有两级的面包屑修改为多级, 刚开始的时候，想着把之后多级的地址放到vuex中，但是 这样在页面刷新的时候，值或许会刷新，并且，每个页面都要加一个commit，感觉比较繁琐，同样的localStorage也要在每个页面添加setItem，最后在router的meta中添加了一个属性，并且这个meta中的属性是可以配置的，在beforeEnter这个钩子函数中的from不同，给不同的to中的meta属性不同的值，这样就可以在再次封装的面包屑组建中获取到一个多级的数据，根据需求不同，来更改数据类型。

r_rebirth
关注
vue动态路由实现多级嵌套面包屑的思路与方法
shengyin714959的博客
05-31 986
前言 最近在工作中遇到了一个问题，是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用this.$route.matched方法获取到path和name集合，动态的嵌套获取不到全部具体的id) 功能比如：A列表页面路由如/a，点击任意一列进入任意一个A的详情页面名字为B,/b/03（这个是动态路由弄是吧,03就是id嘛），点击B页面任意一列，再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的，如（/a；/b/03；/bdetail/01） .
vue3+layui - 详细实现“无限级导航菜单+选项卡路由+面包屑“功能，vue3使用layui菜单实现后台管理系统动态菜单及面包屑tag导航栏效果，侧边动态导航栏多级嵌套菜单，后端接口获取渲染！
高级前端工程师
07-28 3084
vue3，layui，菜单路由导航，路由，router，后台管理系统，layui实现导航菜单，嵌套，多级，children，面包屑，tag路由标签，路由数据从后端服务器api接口获取并显示，自动根据路由匹配标题，lay-menu，vue3-layui项目左侧导航菜单栏，vue3使用layui组件做路由导航菜单示例代码，手风琴，标签导航栏，左侧菜单，不显示，报错，Layui动态生成导航菜单子菜单不显示，动态导航，子菜单，LayUI导航栏二级菜单，无限级左侧导航实现，基于vue3实现layui无限级导航，动态侧
Vue 解决多级动态面包屑导航的问题
12-13
固定路由的面包屑导航 我们在配置router的时候，可以将面包屑数据配置在meta中， 例如 路由配置： { path: '/project/process/:id', name: 'process', component: () => import('@/views/project/process/main.vue'), meta: [ { name: '项目管理列表' }, { name: '项目列表', url: '/project/list' }, { name: '里程碑' }, ], }, 代码： <el-breadcrumb sep
两级视图多层次面包屑展示
山海一哥的博客
06-28 1234
如图所示 现在大部分项目都是左边是菜单栏，右边是视图，定义路由的时候就成了2级视图路由，如果在某一个菜单中有多个层级，比如一个列表菜单中查看详情这种3级的面包屑，甚至像楼主这样的5级层次的深度该如果展示面包屑呢？ 这里的做法是通过路由的方式， 我们通过path的值用/切割后形成一个数组，每一个值代表了一个路径，那么我们怎么知道该值代表了那个路径呢？这里就是name属性的作用了，让name（值最...
vue element三级面包屑
weixin_44276396的博客
10-28 686
Breadcrumb 面包屑 二级跳转三级的bug 路由处添加： div处添加： 添加这几行代码就能解决这个问题了
element-ui面包屑的实现（可适用于嵌套路由）
热门推荐
专注
09-17 1万+
别方，先看一下效果~ 接下来是实现的方式 思路： 首先在路由的meta中设置breadNumber字段，‘一级页面’不设置breadNumber（因为大部分页面是一级页面，所以就不设置了~），‘二级页面’设置breadNumber=2，‘二级页面’设置breadNumber=3，以此类推… 在面包屑的页面监听路由，路由变化时则触发面包屑数据处理事件，数据处理详细在getBreadcrumb方...
vue2 三级路由 面包屑导航
xuhang139的博客
05-24 566
routerView.vue文件 用于三级页面跳转。
element-ui多级菜单+面包屑导航 封装
m0_45043105的博客
05-22 2283
根据文件结构 依次贴出代码好了 ，里面有请求的接口数据 header index.vue 这个文件是到航头 面包屑导航 <template> <div class="header"> <div id="header-sidebar-open-close"> <i :class="[ getsidebar.opened ? 'el-icon-s-unfold' : 'el-icon-s-fold',
vue 动态实现面包屑路由跳转
wuyanyh的博客
12-02 3560
一 ，在路由表上加上name名 path: "/dashboard", name: "首页", component: () => import("../views/dashboard.vue"), children: [ { path: "/homepage/adv/pc", name: "homepage", ...
vue三级路由显示+面包屑
Mr_Chp的博客
02-02 2359
文章借鉴 场景描述：三级路由覆盖二级路由页面，在一级路由页面（主页面显示），并且动态生成面包屑 问题一：如何让三级路由内容显示显示在一级路由页面 可以说是我点级二级路由导航的时候是不发生跳转的，但还要去动态的生成面包屑 利用中间件, 创建一个新vue页面， <template> <router-view></router-view> </template> <script> export default { name: "publ
Vue 面包屑三级路径改变但页面不跳转解决方案
往事随风
12-14 4244
Vue 面包屑三级路径改变但页面不跳转解决方案
vue-cli使用侧边栏和面包屑以及三级路由跳转（通俗易懂，超易上手）
weixin_52682014的博客
01-15 1571
该教程是为了给新手使用的(设置方便通俗易懂)，使用的是最普通的路由方式进行侧边栏和面包屑的显示(升级版有使用递归显示)
breadcrumb 根据路由_vue动态路由实现多级嵌套面包屑的思路与方法
weixin_39520013的博客
12-22 759
前言最近在工作中遇到了一个问题，是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合，动态的嵌套获取不到全部具体的id)功能比如：A列表页面路由如/a，点击任意一列进入任意一个A的详情页面名字为B,/b/03(这个是动态路由弄是吧,03就是id嘛)，点击B页面任意一列，再进入B的详情页名字为...
vue递归组件实现elementUI多级菜单
蜗牛~~
11-04 2628
先看效果： 一、子组件 <template> <div class="myDiv"> <!-- 这里的listAll用于接收父组件传递进来的菜单列表 --> <template v-for="(item,i) in listAll"> <!-- 有child就显示child的下拉型菜单，有小箭头 --> <el-submenu :index=".
vue 动态显示三级路由
Start2019
09-09 1万+
无需vuex、本地存储写路由面包屑。 已确定路由中包含3级菜单，如果有3级菜单，在点击二级菜单的时候，在面包屑中将该二级菜单下所有的3级菜单都显示出来；如果是一级菜单没有子菜单，或者只有二级菜单，那么面包屑中就显示一级菜单名称或二级菜单名称。
vue3 面包屑三级or多级路由配置
鹤渺的星球
08-05 6131
面包屑组件可以清晰的显示当前页面的路径，快速返回之前的任意页面。那么三级或者多级路由应该怎样配置，这里以自己写的代码为例，先看看实现效果。
Vue3 + ElementUI 下拉框防循环导航统一解决方案
最新发布
06-08
<think>我们正在解决一个关于Vue3和ElementUI的下拉框防止循环导航的问题。根据引用，我们注意到用户之前提到了导航栏点击没有效果的问题，原因是在el-menu和子项之间添加了多余的div标签（引用[1]）。此外，引用[2][3]提到了一些路由和全局设置的示例，但并没有直接关于循环导航的内容。因此，我们需要根据常见的最佳实践来提供解决方案。循环导航通常发生在路由系统中，比如在面包屑导航或菜单导航中，如果存在循环引用（例如：A页面导航到B页面，B页面又导航回A页面，形成循环），那么可能会导致无限循环错误或者用户体验问题。但是，用户提到的是“下拉框防循环导航”，所以我们首先需要澄清：在ElementUI的下拉菜单（el-dropdown）中，循环导航可能指的是下拉菜单项之间的循环依赖或路由循环。然而，下拉菜单本身并不会直接导致循环导航，除非每个菜单项都绑定了一个路由跳转（vue-router），而路由跳转中存在循环。因此，我们推测用户可能是想在下拉菜单的路由跳转中避免循环。例如，当前在页面A，而页面A的下拉菜单中包含一个指向页面A的菜单项，这可能会导致跳转回自身，这种跳转可能是不必要的，我们通常希望避免。解决方案思路：1.在菜单项渲染时，判断当前路由是否与菜单项的目标路由相同，如果相同则禁用该菜单项（或者不显示）。2.使用VueRouter的导航守卫（beforeEach）来拦截路由跳转，如果发现目标路由与当前路由相同，则取消跳转（next(false)）。但是，由于用户使用的是ElementUI的下拉菜单（el-dropdown），我们可以在菜单项点击事件中处理，而不是路由守卫中，因为路由守卫是全局的，而我们要针对特定下拉菜单进行控制。具体方案：方案一：在渲染菜单时，对每个菜单项进行判断，如果目标路由与当前路由相同，则禁用该菜单项（disabled属性）。方案二：在菜单项的点击事件中，判断目标路由是否与当前路由相同，如果相同，则阻止跳转并给出提示或直接不跳转。下面给出一个使用Vue3的示例（组合式API）。假设我们有一个下拉菜单，菜单项中包含路由跳转。我们使用VueRouter的`useRoute`和`useRouter`。示例代码：```vue<template><el-dropdown><spanclass="el-dropdown-link">下拉菜单</span><template#dropdown><el-dropdown-menu><el-dropdown-itemv-for="iteminmenuItems":key="item.path":disabled="isCurrentRoute(item.path)"@click="handleMenuClick(item.path)">{{item.title}}</el-dropdown-item></el-dropdown-menu></template></el-dropdown></template><scriptsetup>import{useRoute,useRouter}from'vue-router'import{computed}from'vue'constroute=useRoute()constrouter=useRouter()constmenuItems=[{path:'/page1',title:'页面1'},{path:'/page2',title:'页面2'},{path:'/page3',title:'页面3'},//...其他菜单项]//判断当前路由是否与给定路径相同（注意：如果路由有嵌套，可能需要更复杂的匹配）constisCurrentRoute=(path)=>{returnroute.path===path}//处理菜单点击consthandleMenuClick=(path)=>{//如果点击的是当前路由，则不做任何操作（因为菜单项已被禁用，所以这个情况应该不会发生，但为了安全还是判断）if(route.path!==path){router.push(path)}}</script>```在这个示例中，我们为每个下拉菜单项添加了禁用状态（disabled），如果该菜单项对应的路由路径与当前路由路径相同，则禁用。这样用户就无法点击当前所在页面的菜单项，从而避免了循环跳转（因为跳转到当前页面没有意义）。注意：实际项目中，路由路径可能会包含动态参数，或者有命名路由，那么我们需要更精确的判断。例如，使用路由的name或者fullPath？但一般禁用当前路由的菜单项是一个常见的做法。另外，如果用户要求的是面包屑导航中防止循环，我们同样可以在面包屑组件中判断当前路由，不显示当前路由的面包屑链接（只显示文本，而不是链接）即可。因此，对于下拉菜单的防循环导航，我们主要采取禁用当前路由对应的菜单项来实现。这样既避免了无效的重复跳转，也避免了循环的出现（因为跳转到自身可以被视为一种循环）。相关问题：1.在Vue3中，如何使用路由守卫来防止循环导航？2.ElementUI的下拉菜单（el-dropdown）如何自定义样式？3.Vue3中如何动态生成菜单项并处理路由跳转？4.在Vue路由中，如何避免重复导航到相同的路由（例如连续点击同一个导航链接）？5.如何为ElementUI的下拉菜单项添加图标？</think> 针对 Vue3 和 Element UI 中下拉框防循环导航的统一解决方案，结合引用内容和最佳实践，提供以下两种可靠实现方案： ### 方案一：路由守卫全局拦截（推荐） ```typescript // router/index.ts import { createRouter, createWebHistory, RouteLocation } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [/* 路由配置 */] }) // 记录导航路径栈 const navigationStack = new Map<string, string[]>() router.beforeEach((to, from) => { const currentPath = to.path const previousPaths = navigationStack.get(currentPath) || [] // 检测循环：当前路径是否在历史路径栈中出现过 if (previousPaths.includes(currentPath)) { console.warn('循环导航被阻止', currentPath) return false // 阻止导航 } // 更新路径栈（限制最大深度10层） const newPaths = [currentPath, ...previousPaths].slice(0, 10) navigationStack.set(currentPath, newPaths) return true }) ``` ### 方案二：组件级指令拦截（Element Plus 专用） ```vue <template> <el-dropdown v-cycle-nav :trigger="click"> <span>下拉菜单</span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :key="item.path" v-for="item in menuItems"> {{ item.title }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </template> <script setup> // 注册全局指令 app.directive('cycle-nav', { mounted(el, binding) { const menu = el.querySelector('.el-dropdown-menu') menu.addEventListener('click', (e) => { const target = e.target.closest('.el-dropdown-item') if (target) { const targetPath = target.dataset.path const currentPath = router.currentRoute.value.path // 检测循环跳转 if (targetPath === currentPath) { e.stopImmediatePropagation() ElMessage.warning('禁止循环导航') } } }) } }) </script> ``` ### 关键要点说明 1. **循环检测原理** 通过路由路径历史栈实现闭环检测（方案一），或通过DOM事件拦截实现组件级控制（方案二） 2. **Element UI 特殊处理** - 避免在 `el-menu` 和 `el-submenu` 之间添加额外DOM元素（如div）[^1] - 使用官方推荐的 `router.push()` 而非 `@click` 直接跳转 3. **动态路由注意事项** 带参数路由需进行路径标准化处理： ```javascript // 将 /user/123 规范为 /user/:id const normalizePath = path => path.replace(/\d+/g, ':id') ``` 4. **Vue3 组合式优化** ```typescript // 封装可复用的防循环逻辑 import { ref, watch } from 'vue' import { useRoute } from 'vue-router' export function useCycleGuard(maxDepth = 5) { const route = useRoute() const pathHistory = ref<string[]>([]) watch(() => route.path, (newPath) => { if (pathHistory.value.includes(newPath)) { return false } pathHistory.value = [newPath, ...pathHistory.value].slice(0, maxDepth) }) } ``` ### 典型应用场景 1. 多级联动的类目导航菜单 2. 组织结构树形选择器 3. 地理位置层级选择器 4. 动态生成的侧边栏导航 > **避坑指南**：当使用动态路由时，务必在路由配置中设置 `props: true` 保证参数响应性[^2]，避免循环检测失效。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值