feat: 菜单跳转，关联tags栏

src/layout/components/Main/index.vue

@@ -3,7 +3,7 @@
     <Tabs />
     <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
       <div class="main">
-        <div class="main_box"></div>
+        <router-view />
       </div>
     </a-scrollbar>
   </a-layout-content>
@@ -22,10 +22,6 @@ import Tabs from "@/layout/components/Tabs/index.vue";
 }
 .main {
   padding: $padding;
-  .main_box {
-    height: 1000px;
-    background: #eee;
-  }
 }
 // 修改左侧滚动条宽度
 :deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {

src/layout/components/Menu/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-menu breakpoint="xl" :collapsed="collapsed">
+  <a-menu breakpoint="xl" :collapsed="collapsed" @menu-item-click="onMenuItem">
     <MenuItem :route-tree="routeTree" />
   </a-menu>
 </template>
@@ -9,13 +9,25 @@ import MenuItem from "@/layout/components/Menu/menu-item.vue";
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/theme-config";
 import { useRoutesListStore } from "@/store/route-list";
-
+import { useRouter } from "vue-router";
+const router = useRouter();
 const routerStore = useRoutesListStore();
-const { routeTree } = storeToRefs(routerStore);
+const { routeTree, routeList } = storeToRefs(routerStore);
 const themeStore = useThemeConfig();
 const { collapsed } = storeToRefs(themeStore);
 
 console.log("路由树", routeTree.value);
+
+const onMenuItem = (key: string) => {
+  let find = routeList.value.find((item: Menu.MenuOptions) => item.name === key);
+  console.log("当前", find);
+  if (find) {
+    routerStore.setTagsList(find);
+    router.push(find.path);
+  } else {
+    router.push("/404");
+  }
+};
 </script>
 
 <style lang="scss" scoped></style>

src/layout/components/Menu/menu-item.vue

@@ -7,7 +7,7 @@
       <template #title>{{ item.meta.title }}</template>
       <MenuItem :route-tree="item.children" />
     </a-sub-menu>
-    <a-menu-item v-else :key="item.name">
+    <a-menu-item v-else :key="item?.name">
       <template #icon v-if="item.meta.svgIcon || item.meta.icon">
         <IconCommon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
       </template>

src/layout/components/Tabs/index.vue

@@ -1,15 +1,7 @@
 <template>
   <div class="tabs">
-    <a-tabs
+    <a-tabs :editable="true" :hide-content="true" size="medium" type="line" @delete="handleDelete">
-      :editable="true"
+      <a-tab-pane v-for="item of tagsList" :key="item.name" :title="item.meta.title" :closable="!item.meta.isAffix" />
-      :hide-content="true"
-      size="medium"
-      type="line"
-      show-add-button
-      @add="handleAdd"
-      @delete="handleDelete"
-    >
-      <a-tab-pane v-for="(item, index) of data" :key="item.key" :title="item.title" :closable="index !== 2" />
     </a-tabs>
     <div class="tabs_setting">
       <a-dropdown trigger="hover">
@@ -42,40 +34,55 @@
 </template>
 
 <script setup lang="ts">
-let count = 5;
+import { storeToRefs } from "pinia";
-const data = ref([
+import { useRoutesListStore } from "@/store/route-list";
-  {
+const routerStore = useRoutesListStore();
-    key: "1",
+const { tagsList } = storeToRefs(routerStore);
-    title: "Tab 1",
-    content: "Content of Tab Panel 1"
-  },
-  {
-    key: "2",
-    title: "Tab 2",
-    content: "Content of Tab Panel 2"
-  },
-  {
-    key: "3",
-    title: "Tab 3",
-    content: "Content of Tab Panel 3"
-  },
-  {
-    key: "4",
-    title: "Tab 4",
-    content: "Content of Tab Panel 4"
-  }
-]);
 
-const handleAdd = () => {
+watch(
-  const number = count++;
+  tagsList.value,
-  data.value = data.value.concat({
+  newV => {
-    key: `${number}`,
+    console.log("tagsList", newV);
-    title: `New Tab ${number}`,
+  },
-    content: `Content of New Tab Panel ${number}`
+  { flush: "post" }
-  });
+);
-};
+
+// let count = 5;
+// const data = ref([
+//   {
+//     key: "1",
+//     title: "Tab 1",
+//     content: "Content of Tab Panel 1"
+//   },
+//   {
+//     key: "2",
+//     title: "Tab 2",
+//     content: "Content of Tab Panel 2"
+//   },
+//   {
+//     key: "3",
+//     title: "Tab 3",
+//     content: "Content of Tab Panel 3"
+//   },
+//   {
+//     key: "4",
+//     title: "Tab 4",
+//     content: "Content of Tab Panel 4"
+//   }
+// ]);
+
+// const handleAdd = () => {
+//   const number = count++;
+//   data.value = data.value.concat({
+//     key: `${number}`,
+//     title: `New Tab ${number}`,
+//     content: `Content of New Tab Panel ${number}`
+//   });
+// };
 const handleDelete = (key: any) => {
-  data.value = data.value.filter(item => item.key !== key);
+  console.log("关闭tags", key);
+
+  // data.value = data.value.filter(item => item.key !== key);
 };
 </script>
 

src/router/route-output.ts

@@ -39,7 +39,7 @@ export async function initSetRouter() {
 export function setCacheName(flattenedArray: any) {
   const store = useRoutesListStore(pinia);
   const cacheName = flattenedArray.map((item: any) => item.name);
-  store.setrouteNames(cacheName); // 缓存路由name
+  store.setRouteNames(cacheName); // 缓存路由name
   store.setRouteList(flattenedArray); // 缓存路由
 }
 

src/router/route.ts

@@ -191,16 +191,6 @@ export const staticRoutes = [
  * @link 参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html#netlify
  */
 export const notFoundAndNoPower = [
-  // 未找到页面的时候跳转该页面
-  {
-    path: "/:path(.*)*",
-    name: "notFound",
-    component: () => import("@/views/error/404.vue"),
-    meta: {
-      title: "notFound",
-      isHide: true
-    }
-  },
   {
     path: "/401",
     name: "noPower",
@@ -209,5 +199,14 @@ export const notFoundAndNoPower = [
       title: "notFound",
       isHide: true
     }
+  },
+  {
+    path: "/:path(.*)*", // 匹配任意路由，兜底，未找到页面的时候跳转该页面
+    name: "notFound",
+    component: () => import("@/views/error/404.vue"),
+    meta: {
+      title: "notFound",
+      isHide: true
+    }
   }
 ];

src/store/route-list.ts

@@ -4,13 +4,14 @@ import { defineStore } from "pinia";
  * 路由列表
  * @methods setRouteTree  设置路由树
  * @methods setRoutesList 设置路由一维数据
- * @methods setrouteNames 设置路由名称集合
+ * @methods setRouteNames 设置路由名称集合
  */
 export const useRoutesListStore = defineStore("routeList", {
   state: (): any => ({
     routeTree: [], // 路由树
-    routeList: [], // 路由数据
+    routeList: [], // 路由数据-一维
-    routeNames: [] // 路由名称
+    routeNames: [], // 路由名称
+    tagsList: [] // 标签页数据
   }),
   actions: {
     setRouteTree(data: any) {
@@ -19,8 +20,14 @@ export const useRoutesListStore = defineStore("routeList", {
     setRouteList(data: any) {
       this.routeList = data;
     },
-    setrouteNames(data: Array<string>) {
+    setRouteNames(data: Array<string>) {
       this.routeNames = data;
+    },
+    setTagsList(data: Menu.MenuOptions) {
+      let isExist = this.tagsList.some((item: Menu.MenuOptions) => item.name === data.name);
+      if (!isExist) {
+        this.tagsList.push(data);
+      }
     }
   }
 });