umi插件开发仿dumi项目自动生成导航栏实现_F11 - 专业站长和开发者的学习网站

分享到

umi插件开发仿dumi项目自动生成导航栏实现

JavaScript 来源：互联网作者：佚名发布时间：2023-01-30 09:49:24 人浏览

摘要

前面我们已经完成了页面布局和页面路由，现在我们的导航栏还是自己写死在代码中，现在我们来改造成自动根据页面路由来生成导航栏。获取路由信息我们在前面创建的路由对象，

前面我们已经完成了页面布局和页面路由，现在我们的导航栏还是自己写死在代码中，现在我们来改造成自动根据页面路由来生成导航栏。

获取路由信息

我们在前面创建的路由对象，会被umi存入appData对象中，umi提供了useAppDataAPI可以用于获取路由信息。

创建获取导航数据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 (

<ul>

{nav.map((item: any) => (<li key={item.link}>

<Link style={{ marginRight: '10px' }} to={item.link}>{item.title}</Link>

</li>))}

</ul>

</div>

);

}

您可能感兴趣的文章 :

原文链接 : https://juejin.cn/post/7191691611725070394

Tag : 导航栏(7)自动生成(3)umi(3)dumi(3)

HTML页面中使用Vue示例进阶（快速学会上手Vue）

Vue是用于构建用户界面的渐进式JavaScript框架。特色：构建用户界面数据变成界面；渐进式Vue可以自底向上逐层的应用。 Vue有两种使用方式，
umi插件开发仿dumi项目自动生成导航栏实现

前面我们已经完成了页面布局和页面路由，现在我们的导航栏还是自己写死在代码中，现在我们来改造成自动根据页面路由来生成导航栏。
umi插件开发仿dumi项目实现页面布局

上一章我们已经完成/docs目录下文件自动生路由功能，本章我们将在此基础上，实现自动生成页面导航的功能。使用默认模板提供的layout展
umi插件开发仿dumi项目实现基础路由解析

umi默认约定在/src/pages添加的(j|t)sx?文件会自动加载为路由。同样我们希望实现在某个目录下添加的markdown文件自动加载成为路由直接访问，本
js实现兔年转圈圈动画的代码

兔年到了，兔年大吉祥，为了庆祝这份喜庆的兔年，今天我们设计一个兔子转圈圈的动画模拟吧。希望大家可以得到我的祝福和好运哦。。
Angular8升级至Angular13遇到的问题解决

根据项目需求，需要把Angular版本从8升级到13，无法从8直接升至13，需要一级一级的升级，本文介绍了在升级Angular版本的时候的一种报错和解
Vue3跨域解决方案实例介绍

vue项目配置代理 vue.config.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const { defineConfig } = require(@vue/cli-service) module.exports = defineConfig({ transpileDependencies:
Node.js参数max-old-space-size的介绍

前言 Old space是 V8 托管（也称为垃圾收集）堆（即 JavaScript 对象所在的位置）中最大和最可配置的部分，而--max-old-space-size标志控制其最大大
用js实现一个网页版节拍器

平时练尤克里里经常用到节拍器，突发奇想自己用js开发一个。最后实现的效果如下：ahao430.github.io/metronome/。代码见github仓库：github.com/
js日期格式化yyyy-MM-dd问题

js日期格式化yyyy-MM-dd 方法一 1 2 3 4 5 6 7 8 9 10 11 12 13 function formatDate(date) { console.log(date); // date = new Date(); date = new Date(Date.parse(date.replace(/-/g