vue3+ant+typescript侧边栏和面包屑

### 动态侧边栏与面包屑导航的实现 在 Vue3 项目中使用 Ant Design 和 TypeScript 实现动态侧边栏和面包屑导航是一项常见的需求。以下是具体的实现方法： #### 1. 安装依赖 首先，确保安装了必要的依赖项 `ant-design-vue` 和其他工具库。 ```bash npm install ant-design-vue vue-router vuex @types/vuex --save ``` 上述命令会安装 Ant Design Vue 组件库以及路由管理器和状态管理工具[^1]。 --- #### 2. 配置动态侧边栏 通过 Vuex 或 Pinia 来存储菜单数据并传递给组件。以下是一个简单的示例代码片段展示如何配置动态侧边栏。 ##### (a) 创建菜单数据结构 定义一个菜单数组作为基础数据源。 ```typescript // src/store/menu.ts export const menuData = [ { key: 'dashboard', title: '仪表盘', icon: 'DashboardOutlined', // Ant Design 图标名称 path: '/dashboard' }, { key: 'users', title: '用户管理', children: [ { key: 'list', title: '用户列表', path: '/users/list' }, { key: 'add', title: '新增用户', path: '/users/add' } ] } ]; ``` ##### (b) 在 Vuex 中维护菜单状态 创建一个模块来保存当前选中的菜单路径和其他相关信息。 ```typescript // src/store/modules/sidebar.ts import { Module } from 'vuex'; import { RootState } from '@/store'; const sidebarModule: Module<any, RootState> = { state() { return { selectedKeys: [], openKeys: [] }; }, mutations: { setSelectedKeys(state, keys: string[]) { state.selectedKeys = keys; }, setOpenKeys(state, keys: string[]) { state.openKeys = keys; } }, actions: {} }; export default sidebarModule; ``` ##### (c) 渲染 SideMenu 组件 利用 Ant Design 的 `<Menu>` 组件渲染左侧菜单。 ```vue <template> <a-menu mode="inline" :open-keys="openKeys" :selected-keys="selectedKeys"> <SideMenuItem v-for="(item, index) in menuData" :key="index" :menu-item="item" /> </a-menu> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { mapMutations, mapState } from 'vuex'; import SideMenuItem from './SideMenuItem.vue'; // 子菜单递归组件 export default defineComponent({ components: { SideMenuItem }, computed: { ...mapState(['openKeys', 'selectedKeys']), menuData(): any[] { return this.$store.state.menuData || []; } }, methods: { ...mapMutations(['setSelectedKeys', 'setOpenKeys']) } }); </script> ``` --- #### 3. 面包屑导航的实现 面包屑可以通过解析当前路由对象自动生成。 ##### (a) 路由配置 为每条路由设置元信息（meta），用于描述其父级关系。 ```typescript // src/router/index.ts import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue'), meta: { breadcrumb: ['首页'] } }, { path: '/users', name: 'Users', redirect: '/users/list', meta: { breadcrumb: ['用户管理'] }, children: [ { path: 'list', name: 'UserList', component: () => import('@/views/User/List.vue'), meta: { breadcrumb: ['用户管理', '用户列表'] } }, { path: 'add', name: 'AddUser', component: () => import('@/views/User/Add.vue'), meta: { breadcrumb: ['用户管理', '新增用户'] } } ] } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` ##### (b) 面包屑组件 监听 `$route` 变化并提取 `meta.breadcrumb` 数据。 ```vue <template> <a-breadcrumb style="margin-bottom: 16px;"> <a-breadcrumb-item v-for="(crumb, i) in breadcrumbs" :key="i">{{ crumb }}</a-breadcrumb-item> </a-breadcrumb> </template> <script lang="ts"> import { defineComponent, watchEffect, ref } from 'vue'; import { useRoute } from 'vue-router'; export default defineComponent({ setup() { const route = useRoute(); const breadcrumbs = ref<string[]>([]); watchEffect(() => { breadcrumbs.value = route.meta?.breadcrumb as string[]; }); return { breadcrumbs }; } }); </script> ``` --- #### 4. 整合到布局文件 最后，在全局布局文件中引入这两个部分即可完成整体效果。 ```vue <template> <div class="layout-container"> <!-- 左侧菜单 --> <aside><Sidebar /></aside> <!-- 主体区域 --> <main> <!-- 面包屑 --> <Breadcrumb /> <!-- 页面内容 --> <router-view></router-view> </main> </div> </template> <script lang="ts"> import Sidebar from '@/components/Sidebar.vue'; import Breadcrumb from '@/components/Breadcrumb.vue'; export default { components: { Sidebar, Breadcrumb } }; </script> ``` --- ### 总结 以上方案展示了如何借助 Ant Design Vue 和 TypeScript 构建动态侧边栏与面包屑导航的功能。核心在于合理设计菜单数据结构并通过 Vuex/Pinia 进行动态更新。