vault backup: 2022-05-07 11:00:44

随时随地/管理后台中的 Tab 功能.md

@@ -1,4 +1,28 @@
 最近在写基于 React 和 Antd 的后台管理系统，用作我的博客管理上，在参考其他开源项目的时候有一个功能我很感兴趣，就是在管理后台中加入一个像浏览器 Tabs 标签页的功能，让它实现切换标签页的功能，虽然现在的管理系统的页面总数不多其实没有什么快速切换的需求 = =
 刚看到这个问题的时候，我的第一反应是有没有一个 API 可以记录并获取路由栈中的所有路由，再把他们给渲染出来，就能实现标签页的显示问题了，但是我找了一下好像没有这样的 API，所有后面会用手写记录路由的方式来实现标签页的显示，要是有谁知道有这样一个API可以告诉我哇
-大致的思路是：外层用 Context 包裹，在 Context 内部用 useEffect 监听路由是否发生变化，也就是 pathname，如果发生了变化就记录路由的属性，因为要实现显示Tab名称、Tab 跳转和保存路由的查询参数，所以记录的时候这些信息要一起保存起来
-有思路之后实现起来就很容易了，首先
+
+## 大致的思路
+外层用 Context 包裹，在 Context 内部用 useEffect 监听路由是否发生变化，也就是 pathname，如果发生了变化就记录路由的属性，因为要实现显示Tab名称、Tab 跳转和保存路由的查询参数，所以记录的时候这些信息要一起保存起来
+
+## Tabs 添加路由
+有思路之后实现起来就很容易了，首先要实现一个 Context ，这个很简单直接跳过，然后实现一个路由的监听记录函数，这里用 useEffect 来做
+
+```javascript
+const addTabItem = (path: TabList["path"], search: TabList["search"]) => {
+	if (findTabUtils(path) === -1) {
+		const flattenList = flattenArray(routerConfig);
+		const routerIndex = flattenList.findIndex((item) => {
+			item.path === path
+		});
+		if (routerIndex !== -1) {
+			setTabList([
+				...tabList,
+				{ path, name: flattenList[routerIndex].name, search },
+			]);
+		}
+	}
+
+	// 这个是点击 Tab 切换路由的函数，后面会写到
+	switchTab(path, search);
+};
+```