46 动态生成侧边栏数据 - udo-bit/naive_admin_pro GitHub Wiki

目标

完成侧边栏数据组织和渲染的功能

开发

现在我们已经拿到了我们的路由的数据，也就是我们菜单需要显示的数据了，那么接下来我们就可以去开发我们的侧边栏菜单了。
我们在routes目录下创建一个generate-route.ts的文件，然后先初始化一下整个文件：

import type { RouteRecordRaw } from 'vue-router'

export const generateMenu = (routes: RouteRecordRaw[]) => {
  // TODO
}

分析

首先我们来分析一下如何将路由数据转换成菜单数据，首先我们来看一些MenuOption必须的参数我们直接在
naiveUIMenu中去查看真实的例子。
那么我们来写一下大体的对应关系：

label => meta.title
key => path
icon => meta.icon
children => children

我们就参照目前的对应关系去实现。

import type { RouteRecordRaw } from 'vue-router'
import type { MenuOption } from 'naive-ui'

export const generateMenu = (routes: RouteRecordRaw[]): MenuOption[] => {
  const menus: MenuOption[] = []
  for (const route of routes) {
    const currentMenu: MenuOption = {
      key: route.path,
      label: route.meta?.title,
    }
    if (route.children && route.children.length > 0)
      currentMenu.children = generateMenu(route.children)
    menus.push(currentMenu)
  }
  return menus
}

然后再stores/user.ts中使用

import { generateMenu } from '~/routes/generate-menu'

const menusData = computed(() => {
  return generateMenu(routerRecords.value)
})

最后在base-layout/index.vue中进行使用

// import { menuOptions } from '../composables/menu-data'
const userStore = useUserStore()
const menuOptions = computed(() => userStore.menusData)

最后查看效果

⚠️ **GitHub.com Fallback** ⚠️