feat(projects): support route query in menu

src/layouts/modules/global-menu/base-menu.vue

@@ -69,9 +69,11 @@ const selectedBgColor = computed(() => {
 });
 
 function handleClickMenu(menuInfo: MenuInfo) {
-  const routeKey = menuInfo.key as RouteKey;
+  const key = menuInfo.key as RouteKey;
 
-  routerPushByKey(routeKey);
+  const { query } = routeStore.getSelectedMenuMetaByKey(key) || {};
+
+  routerPushByKey(key, { query });
 }
 </script>
 

src/store/modules/route/index.ts

@@ -271,6 +271,18 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     return getSelectedMenuKeyPathByKey(selectedKey, menus.value);
   }
 
+  /**
+   * Get selected menu meta by key
+   *
+   * @param selectedKey Selected menu key
+   */
+  function getSelectedMenuMetaByKey(selectedKey: string) {
+    // The routes in router.options.routes are static, you need to use router.getRoutes() to get all the routes.
+    const allRoutes = router.getRoutes();
+
+    return allRoutes.find(route => route.name === selectedKey)?.meta || null;
+  }
+
   return {
     resetStore,
     routeHome,
@@ -284,6 +296,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     isInitAuthRoute,
     setIsInitAuthRoute,
     getIsAuthRouteExist,
-    getSelectedMenuKeyPath
+    getSelectedMenuKeyPath,
+    getSelectedMenuMetaByKey
   };
 });

src/typings/router.d.ts

@@ -59,5 +59,7 @@ declare module 'vue-router' {
     multiTab?: boolean;
     /** If set, the route will be fixed in tabs, and the value is the order of fixed tabs */
     fixedIndexInTab?: number;
+    /** if set query parameters, it will be automatically carried when entering the route */
+    query?: Record<string, string>;
   }
 }