umi插件开发仿dumi项目自动生成导航栏实现详解
kukiiu 人气:0引言
前面我们已经完成了页面布局和页面路由,现在我们的导航栏还是自己写死在代码中,现在我们来改造成自动根据页面路由来生成导航栏。
获取路由信息
我们在前面创建的路由对象,会被umi
存入appData
对象中,umi
提供了useAppData
API可以用于获取路由信息。
创建获取导航数据hook
// /src/client/theme-api/useNavData.ts import { useAppData } from "umi"; /** * hook for get nav data */ export const useNavData = () => { // 获取全局路由信息 const { routes } = useAppData(); // 获取/docs下的路由信息 const localeDocRoutes: any[] = Object.values(routes).filter(route => route.parentId === 'DocLayout') // 获取导航信息 const nav: any = [] Object.values(localeDocRoutes).forEach(route => { const _r = { ...route } if(_r.path == '/') { nav.push({ title: '首页', link: '/', }) } else { nav.push({ title: route.path, link: '/' + route.path, }) } }) return nav; };
Layout中使用
// /src/client/theme-default/layouts/DocLayout.ts import { Link, Outlet } from 'umi'; import { useNavData } from '@/client/theme-api/useNavData'; import styles from './index.less'; export default function Layout() { const nav = useNavData() return ( <div className={styles.navs}> <ul> {nav.map((item: any) => (<li key={item.link}> <Link style={{ marginRight: '10px' }} to={item.link}>{item.title}</Link> </li>))} </ul> <Outlet /> </div> ); }
加载全部内容