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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

### 动态侧边导航栏及面包屑实现 以下是基于 Vue3 和 `ant-design-vue` 的动态侧边导航栏与面包屑组件的实现方法。通过路由配置自动生成菜单和面包屑。 #### 1. 安装依赖 首先安装必要的依赖包: ```bash npm install vue-router@next ant-design-vue ``` #### 2. 配置路由 定义路由时,需为每个路由添加 `meta` 属性来描述菜单名称和父级关系。 ```javascript // router/index.js import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue'), meta: { title: '首页', breadcrumb: ['首页'] } }, { path: '/about', name: 'About', component: () => import('@/views/About.vue'), meta: { title: '关于我们', breadcrumb: ['首页', '关于我们'] } }, { path: '/settings', name: 'Settings', redirect: '/settings/profile', component: () => import('@/views/Settings/Index.vue'), children: [ { path: 'profile', name: 'Profile', component: () => import('@/views/Settings/Profile.vue'), meta: { title: '个人资料', breadcrumb: ['首页', '设置', '个人资料'] } }, { path: 'security', name: 'Security', component: () => import('@/views/Settings/Security.vue'), meta: { title: '安全设置', breadcrumb: ['首页', '设置', '安全设置'] } } ], meta: { title: '设置', breadcrumb: ['首页', '设置'] } } ]; export default createRouter({ history: createWebHistory(), routes, }); ``` #### 3. 创建布局组件 创建一个包含侧边导航栏和面包屑的 Layout 组件。 ```vue <template> <a-layout style="min-height: 100vh"> <!-- 左侧导航 --> <a-layout-sider collapsible v-model:collapsed="collapsed"> <div class="logo">Logo</div> <a-menu theme="dark" mode="inline" :selectedKeys="[currentRoute.name]" @click="handleMenuClick"> <template v-for="(item, index) in menuData" :key="index"> <a-sub-menu v-if="item.children && item.children.length > 0" :key="item.path"> <template #title>{{ item.meta.title }}</template> <a-menu-item v-for="child in item.children" :key="child.path">{{ child.meta.title }}</a-menu-item> </a-sub-menu> <a-menu-item v-else :key="item.path">{{ item.meta.title }}</a-menu-item> </template> </a-menu> </a-layout-sider> <!-- 主体部分 --> <a-layout-content style="margin: 16px; padding: 16px;"> <!-- 面包屑 --> <a-breadcrumb style="margin-bottom: 16px;" separator="/"> <a-breadcrumb-item v-for="(crumb, idx) in breadcrumbs" :key="idx">{{ crumb }}</a-breadcrumb-item> </a-breadcrumb> <!-- 页面内容 --> <router-view /> </a-layout-content> </a-layout> </template> <script> import { computed, ref } from 'vue'; import { useRoute, useRouter } from 'vue-router'; export default { setup() { const route = useRoute(); const router = useRouter(); // 当前路由对象 const currentRoute = computed(() => route); // 是否折叠菜单 const collapsed = ref(false); // 获取菜单数据 (过滤掉不需要显示在菜单中的路由) const menuData = computed(() => router.getRoutes().filter(route => route.meta?.title).map(r => ({ ...r })) ); // 处理菜单点击事件 function handleMenuClick({ key }) { router.push(key); } // 计算当前面包屑路径 const breadcrumbs = computed(() => { return currentRoute.value.meta.breadcrumb || []; }); return { collapsed, menuData, currentRoute, breadcrumbs, handleMenuClick }; } }; </script> <style scoped> .logo { height: 32px; background: rgba(255, 255, 255, 0.2); margin: 16px; } </style> ``` 上述代码实现了以下功能: - **动态生成菜单**:从路由表中提取具有 `meta.title` 的路由作为菜单项[^1]。 - **支持多级嵌套菜单**:如果某个路由有子路由,则会自动将其渲染为下拉菜单[^2]。 - **面包屑展示**:根据当前路由的 `meta.breadcrumb` 字段生成面包屑[^3]。 #### 4. 应用入口 最后,在应用入口文件中引入并注册路由器以及根组件。 ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/reset.css'; createApp(App) .use(Antd) .use(router) .mount('#app'); ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值