vault backup: 2022-05-07 14:44:01

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

@@ -26,6 +26,7 @@ const addTabItem = (path, search) => {
 		// 这里主要是为了保存 Tab 对应的路由名称，flattenArray 是数组扁平化函数
 		// 由于我的路由是用 useRoutes 实现的约定式路由，路由的名称也记录在里边
 		// 所以这里需要将其扁平化和找到对应的路由名称
+		// 文章后边会有这个扁平化函数的代码
 		const flattenList = flattenArray(routerConfig);
 		const routerIndex = flattenList.findIndex((item) => {
 			item.path === path
@@ -48,4 +49,18 @@ const addTabItem = (path, search) => {
 以上的逻辑就是最核心的部分，通过监听路由变化，我们得到了一个 Tabs 列表，后续只需要渲染出它显示的问题就解决了
 
 ## Tabs 切换路由和关闭路由
-解决了 Tab 添加的问题，接下来要解决的就是 Tab 的切换和关闭，总不能只能开不能关吧，点击和切换的代码逻辑很简单，代码量也很少，没有什么难点
+解决了 Tab 添加的问题，接下来要解决的就是 Tab 的切换和关闭，总不能只能开不能关吧，点击和切换的代码逻辑很简单，代码量也很少，没有什么难点
+对于路由的切换，我们需要一个新的状态来保存当前被选中的 Tab，这里叫作 activeTab
+
+```javascript
+// 用于保存当前选中 Tabs 的状态
+const [activeTab, setActiveTab] = useState("");
+
+// 路由的切换
+const switchTab = (path, search = "") => {
+	// 切换选中的 Tabs
+	setActiveTab(path);
+	// 跳转路由
+	navigate(path + search);
+};
+```