fix: rotue RelativePath, attach meta.params .params

Author: sendya

examples/layouts/BasicLayout.vue

@@ -10,7 +10,7 @@
   >
     <template #menuHeaderRender>
       <a>
-        <img src="/public/antdv-pro-logo.svg" />
+        <img src="/antdv-pro-logo.svg" />
         <h1>Pro Layout</h1>
       </a>
     </template>
@@ -31,12 +31,8 @@
     </template>
     <!-- custom breadcrumb itemRender  -->
     <template #breadcrumbRender="{ route, params, routes }">
-      <span v-if="routes.indexOf(route) === routes.length - 1">
-        {{ route.breadcrumbName }}
-      </span>
-      <router-link v-else :to="{ path: route.path, params }">
-        {{ route.breadcrumbName }}
-      </router-link>
+      <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
+      <router-link v-else :to="{ path: route.path, params }">{{ route.breadcrumbName }}</router-link>
     </template>
     <template #menuExtraRender="{ collapsed }">
       <a-input-search v-if="!collapsed" @search="handleSearch" />
@@ -136,6 +132,8 @@ export default defineComponent({
     const router = useRouter();
     const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
 
+    console.log('menuData Paths:', menuData);
+
     const baseState = reactive<Omit<RouteContextProps, 'menuData'>>({
       selectedKeys: [],
       openKeys: [],

examples/layouts/CustomLayout.vue

@@ -10,7 +10,7 @@
   >
     <template #menuHeaderRender>
       <a>
-        <img src="/public/antdv-pro-logo.svg" />
+        <img src="/antdv-pro-logo.svg" />
         <h1>Pro Layout</h1>
       </a>
     </template>
@@ -47,9 +47,7 @@
       >
         <router-link :to="{ path: item.path }">
           <div class="a-menu-item-title">
-            <a-badge count="5" dot>
-              {{ item.meta.title }}
-            </a-badge>
+            <a-badge count="5" dot>{{ item.meta.title }}</a-badge>
           </div>
         </router-link>
       </a-menu-item>

examples/router.ts

@@ -19,13 +19,13 @@ const routes: RouteRecordRaw[] = [
         component: RouteView,
         children: [
           {
-            path: 'workspace',
+            path: '/dashboard/workspace',
             name: 'workspace',
             meta: { title: 'Workspace', icon: 'icon-antdesign' },
             component: () => import('./views/page1.vue'),
           },
           {
-            path: 'monitor',
+            path: '/dashboard/monitor',
             name: 'monitor',
             meta: { title: 'Monitor', icon: 'icon-icon-test' },
             component: () => import('./views/page2.vue'),
@@ -45,6 +45,18 @@ const routes: RouteRecordRaw[] = [
             meta: { title: 'Basic Form' },
             component: () => import('./views/page1.vue'),
           },
+          {
+            path: 'description-form/:id(\\d+)?',
+            name: 'description-form',
+            meta: {
+              title: 'Description',
+              // attach `params` to `$route.params`
+              params: {
+                id: 2,
+              },
+            },
+            component: () => import('./views/dynamic-page.vue'),
+          },
         ],
       },
       {

examples/views/dynamic-page.vue

@@ -0,0 +1,36 @@
+<template>
+  <page-container :title="`${$route.meta.title} ${$route.params.id}`" sub-title="is a sub-title.">
+    <template #content>
+      <div>
+        container.content
+        <h1>{{ text }}</h1>
+      </div>
+    </template>
+    <span>page-content</span>
+    <a-button @click="handleClick">Button</a-button>
+    <p v-for="item in new Array(20)" :key="item">text block...</p>
+  </page-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { Button, message } from 'ant-design-vue';
+
+export default defineComponent({
+  components: {
+    [Button.name]: Button,
+  },
+  setup() {
+    const text = ref<string>('1');
+    const handleClick = () => {
+      message.info('clicked');
+      text.value = `${Math.random()}`;
+    };
+    return {
+      handleClick,
+
+      text,
+    };
+  },
+});
+</script>

src/SiderMenu/BaseMenu.tsx

@@ -216,7 +216,7 @@ class MenuUtil {
     const target = (meta.target || null) as string | null;
     const hasUrl = isUrl(item.path);
     const CustomTag: any = (target && 'a') || this.RouterLink;
-    const props = { to: { name: item.name } };
+    const props = { to: { name: item.name, ...item.meta } };
     const attrs = hasUrl || target ? { ...item.meta, href: item.path, target } : {};
 
     const { prefixCls, locale } = this.props;

src/utils/getMenuData.ts

@@ -14,11 +14,19 @@ export const formatRelativePath = (
 ): RouteRecordRaw[] => {
   // 计算路由绝对路径
   return routes.map(route => {
-    if (parent) {
-      route.path = `${parent.path || ''}/${route.path}`;
-    } else {
-      route.path = `/${route.path}`;
+    // Note that nested paths that start with / will be treated as a root path.
+    // This allows you to leverage the component nesting without having to use a nested URL.
+    // @ref https://router.vuejs.org/guide/essentials/nested-routes.html#nested-routes
+    const hasRelativePath = route.path.startsWith('/');
+    if (!hasRelativePath) {
+      if (parent) {
+        route.path = `${parent.path || ''}/${route.path}`;
+      } else {
+        route.path = `/${route.path}`;
+      }
     }
+
+    // reformat path
     route.path = route.path.replace('//', '/');
     // format children routes
     if (route.children && route.children.length > 0) {
@@ -42,7 +50,11 @@ export const getMenuData = (routes: RouteRecordRaw[], child?: RouteRecordRaw): M
   );
   const breadcrumb: Record<string, any> = {};
   return {
-    menuData: formatRelativePath(childrenRoute?.children || ([] as RouteRecordRaw[]), breadcrumb),
+    menuData: formatRelativePath(
+      childrenRoute?.children || ([] as RouteRecordRaw[]),
+      breadcrumb,
+      undefined,
+    ),
     breadcrumb,
   };
 };