### 动态侧边导航栏及
面包屑实现
以下是基于
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');
```
---
###
本文分享了将原有两级面包屑组件升级为多级的实践经验，通过在Vue路由的meta属性中配置动态值，避免了使用Vuex或localStorage带来的刷新问题和额外开销，实现了高效的数据传递。
扫一扫
945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
