feat: ✨ 侧边动态路由菜单支持参数

mock/menu.mock.ts

@@ -362,6 +362,7 @@ export default defineMock([
                 icon: "",
                 hidden: false,
                 roles: ["ADMIN"],
+                params: { type: "1" },
               },
             },
           ],

src/components/AppLink/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="type" v-bind="linkProps(to)">
+  <component :is="linkType" v-bind="linkProps(to)">
     <slot></slot>
   </component>
 </template>
@@ -14,20 +14,25 @@ import { isExternal } from "@/utils/index";
 
 const props = defineProps({
   to: {
-    type: String,
+    type: Object,
     required: true,
   },
 });
 
-const isExternalLink = computed(() => isExternal(props.to));
+const isExternalLink = computed(() => {
-
+  return isExternal(props.to.path || "");
-const type = computed(() => {
-  return isExternalLink.value ? "a" : "router-link";
 });
 
-const linkProps = (to: string) => {
+const linkType = computed(() => (isExternalLink.value ? "a" : "router-link"));
-  return isExternalLink.value
+
-    ? { href: to, target: "_blank", rel: "noopener noreferrer" }
+const linkProps = (to: any) => {
-    : { to };
+  if (isExternalLink.value) {
+    return {
+      href: to.path,
+      target: "_blank",
+      rel: "noopener noreferrer",
+    };
+  }
+  return { to: to };
 };
 </script>

src/layout/components/Sidebar/components/SidebarMenuItem.vue

@@ -8,7 +8,13 @@
         !item.meta?.alwaysShow
       "
     >
-      <AppLink v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+      <AppLink
+        v-if="onlyOneChild.meta"
+        :to="{
+          path: resolvePath(onlyOneChild.path),
+          query: onlyOneChild.meta.params,
+        }"
+      >
         <el-menu-item
           :index="resolvePath(onlyOneChild.path)"
           :class="{ 'submenu-title-noDropdown': !isNest }"

src/views/demo/other.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>路由参数：{{ query }}</div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "Other",
+  inheritAttrs: false,
+});
+import { useRoute } from "vue-router";
+
+// 获取query参数
+const query = useRoute().query.type as string;
+</script>
+
+<style lang="scss" scoped></style>