@esmx/router-vue 3.0.0-rc.59 → 3.0.0-rc.62

package/README.md

@@ -350,7 +350,7 @@ const link = useLink({
 <template>
   <a 
     v-bind="link.attributes"
-    v-on="link.getEventHandlers()"
+    v-on="link.createEventHandlers()"
     :class="{ active: link.isActive }"
   >
     Custom Link
@@ -460,7 +460,7 @@ const link = useLink(props).value;
 <template>
   <button
     v-bind="link.attributes"
-    v-on="link.getEventHandlers()"
+    v-on="link.createEventHandlers()"
     :class="{ 
       active: link.isActive,
       disabled: disabled 

package/README.zh-CN.md

@@ -350,7 +350,7 @@ const link = useLink({
 <template>
   <a 
     v-bind="link.attributes"
-    v-on="link.getEventHandlers()"
+    v-on="link.createEventHandlers()"
     :class="{ active: link.isActive }"
   >
     自定义链接
@@ -460,7 +460,7 @@ const link = useLink(props).value;
 <template>
   <button
     v-bind="link.attributes"
-    v-on="link.getEventHandlers()"
+    v-on="link.createEventHandlers()"
     :class="{ 
       active: link.isActive,
       disabled: disabled 

package/dist/router-link.d.ts

@@ -1,4 +1,4 @@
-import type { RouteLayerOptions, RouteLocationInput, RouteMatchType, RouterLinkType } from '@esmx/router';
+import type { RouterLinkProps } from '@esmx/router';
 import { type PropType } from 'vue';
 /**
  * RouterLink component for navigation.
@@ -56,7 +56,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example '/home' | { path: '/user', query: { id: '123' } }
      */
     to: {
-        type: PropType<RouteLocationInput>;
+        type: PropType<RouterLinkProps["to"]>;
         required: true;
     };
     /**
@@ -65,7 +65,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example 'push' | 'replace' | 'pushWindow' | 'replaceWindow' | 'pushLayer'
      */
     type: {
-        type: PropType<RouterLinkType>;
+        type: PropType<RouterLinkProps["type"]>;
         default: string;
     };
     /**
@@ -73,7 +73,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example :replace={true} → type="replace"
      */
     replace: {
-        type: BooleanConstructor;
+        type: PropType<RouterLinkProps["replace"]>;
         default: boolean;
     };
     /**
@@ -84,7 +84,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @default 'include'
      */
     exact: {
-        type: PropType<RouteMatchType>;
+        type: PropType<RouterLinkProps["exact"]>;
         default: string;
     };
     /**
@@ -92,7 +92,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example 'nav-active' | 'selected'
      */
     activeClass: {
-        type: StringConstructor;
+        type: PropType<RouterLinkProps["activeClass"]>;
     };
     /**
      * Event(s) that trigger navigation. Can be string or array of strings.
@@ -100,7 +100,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example 'click' | ['click', 'mouseenter']
      */
     event: {
-        type: PropType<string | string[]>;
+        type: PropType<RouterLinkProps["event"]>;
         default: string;
     };
     /**
@@ -109,7 +109,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example 'button' | 'div' | 'span'
      */
     tag: {
-        type: StringConstructor;
+        type: PropType<RouterLinkProps["tag"]>;
         default: string;
     };
     /**
@@ -118,34 +118,16 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
      */
     layerOptions: {
-        type: PropType<RouteLayerOptions>;
+        type: PropType<RouterLinkProps["layerOptions"]>;
     };
     /**
-     * Custom event handler to control navigation behavior.
-     * Should return `true` to allow router to navigate, otherwise to prevent it.
+     * Custom navigation handler called before navigation.
+     * Receives the event object and the event name that triggered navigation.
      *
      * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
-     * @default
-     *
-     * (event: Event & Partial<MouseEvent>): boolean => {
-     *   // don't redirect with control keys
-     *   if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
-     *   // don't redirect when preventDefault called
-     *   if (e.defaultPrevented) return false;
-     *   // don't redirect on right click
-     *   if (e.button !== undefined && e.button !== 0) return false;
-     *   // don't redirect if `target="_blank"`
-     *   const target = e.currentTarget?.getAttribute?.('target') ?? '';
-     *   if (/\b_blank\b/i.test(target)) return false;
-     *   // Prevent default browser navigation to enable SPA routing
-     *   // Note: this may be a Weex event which doesn't have this method
-     *   if (e.preventDefault) e.preventDefault();
-     *
-     *  return true;
-     * }
      */
-    eventHandler: {
-        type: PropType<(event: Event) => boolean | undefined | void>;
+    beforeNavigate: {
+        type: PropType<RouterLinkProps["beforeNavigate"]>;
     };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
@@ -156,7 +138,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example '/home' | { path: '/user', query: { id: '123' } }
      */
     to: {
-        type: PropType<RouteLocationInput>;
+        type: PropType<RouterLinkProps["to"]>;
         required: true;
     };
     /**
@@ -165,7 +147,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example 'push' | 'replace' | 'pushWindow' | 'replaceWindow' | 'pushLayer'
      */
     type: {
-        type: PropType<RouterLinkType>;
+        type: PropType<RouterLinkProps["type"]>;
         default: string;
     };
     /**
@@ -173,7 +155,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example :replace={true} → type="replace"
      */
     replace: {
-        type: BooleanConstructor;
+        type: PropType<RouterLinkProps["replace"]>;
         default: boolean;
     };
     /**
@@ -184,7 +166,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @default 'include'
      */
     exact: {
-        type: PropType<RouteMatchType>;
+        type: PropType<RouterLinkProps["exact"]>;
         default: string;
     };
     /**
@@ -192,7 +174,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example 'nav-active' | 'selected'
      */
     activeClass: {
-        type: StringConstructor;
+        type: PropType<RouterLinkProps["activeClass"]>;
     };
     /**
      * Event(s) that trigger navigation. Can be string or array of strings.
@@ -200,7 +182,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example 'click' | ['click', 'mouseenter']
      */
     event: {
-        type: PropType<string | string[]>;
+        type: PropType<RouterLinkProps["event"]>;
         default: string;
     };
     /**
@@ -209,7 +191,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example 'button' | 'div' | 'span'
      */
     tag: {
-        type: StringConstructor;
+        type: PropType<RouterLinkProps["tag"]>;
         default: string;
     };
     /**
@@ -218,39 +200,21 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
      * @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
      */
     layerOptions: {
-        type: PropType<RouteLayerOptions>;
+        type: PropType<RouterLinkProps["layerOptions"]>;
     };
     /**
-     * Custom event handler to control navigation behavior.
-     * Should return `true` to allow router to navigate, otherwise to prevent it.
+     * Custom navigation handler called before navigation.
+     * Receives the event object and the event name that triggered navigation.
      *
      * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
-     * @default
-     *
-     * (event: Event & Partial<MouseEvent>): boolean => {
-     *   // don't redirect with control keys
-     *   if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
-     *   // don't redirect when preventDefault called
-     *   if (e.defaultPrevented) return false;
-     *   // don't redirect on right click
-     *   if (e.button !== undefined && e.button !== 0) return false;
-     *   // don't redirect if `target="_blank"`
-     *   const target = e.currentTarget?.getAttribute?.('target') ?? '';
-     *   if (/\b_blank\b/i.test(target)) return false;
-     *   // Prevent default browser navigation to enable SPA routing
-     *   // Note: this may be a Weex event which doesn't have this method
-     *   if (e.preventDefault) e.preventDefault();
-     *
-     *  return true;
-     * }
      */
-    eventHandler: {
-        type: PropType<(event: Event) => boolean | undefined | void>;
+    beforeNavigate: {
+        type: PropType<RouterLinkProps["beforeNavigate"]>;
     };
 }>> & Readonly<{}>, {
-    replace: boolean;
-    exact: RouteMatchType;
-    type: RouterLinkType;
-    event: string | string[];
-    tag: string;
+    type: import("@esmx/router").RouterLinkType | undefined;
+    replace: boolean | undefined;
+    exact: import("@esmx/router").RouteMatchType | undefined;
+    event: string | string[] | undefined;
+    tag: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/router-link.mjs

@@ -18,12 +18,18 @@ export const RouterLink = defineComponent({
      * @default 'push'
      * @example 'push' | 'replace' | 'pushWindow' | 'replaceWindow' | 'pushLayer'
      */
-    type: { type: String, default: "push" },
+    type: {
+      type: String,
+      default: "push"
+    },
     /**
      * @deprecated Use 'type="replace"' instead
      * @example :replace={true} → type="replace"
      */
-    replace: { type: Boolean, default: false },
+    replace: {
+      type: Boolean,
+      default: false
+    },
     /**
      * How to match the active state.
      * - 'include': Match if current route includes this path
@@ -31,12 +37,17 @@ export const RouterLink = defineComponent({
      * - 'route': Match based on route configuration
      * @default 'include'
      */
-    exact: { type: String, default: "include" },
+    exact: {
+      type: String,
+      default: "include"
+    },
     /**
      * CSS class to apply when link is active (route matches).
      * @example 'nav-active' | 'selected'
      */
-    activeClass: { type: String },
+    activeClass: {
+      type: String
+    },
     /**
      * Event(s) that trigger navigation. Can be string or array of strings.
      * @default 'click'
@@ -57,84 +68,52 @@ export const RouterLink = defineComponent({
      * Only used when type='pushLayer'.
      * @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
      */
-    layerOptions: { type: Object },
+    layerOptions: {
+      type: Object
+    },
     /**
-     * Custom event handler to control navigation behavior.
-     * Should return `true` to allow router to navigate, otherwise to prevent it.
+     * Custom navigation handler called before navigation.
+     * Receives the event object and the event name that triggered navigation.
      *
      * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
-     * @default
-     *
-     * (event: Event & Partial<MouseEvent>): boolean => {
-     *   // don't redirect with control keys
-     *   if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
-     *   // don't redirect when preventDefault called
-     *   if (e.defaultPrevented) return false;
-     *   // don't redirect on right click
-     *   if (e.button !== undefined && e.button !== 0) return false;
-     *   // don't redirect if `target="_blank"`
-     *   const target = e.currentTarget?.getAttribute?.('target') ?? '';
-     *   if (/\b_blank\b/i.test(target)) return false;
-     *   // Prevent default browser navigation to enable SPA routing
-     *   // Note: this may be a Weex event which doesn't have this method
-     *   if (e.preventDefault) e.preventDefault();
-     *
-     *  return true;
-     * }
      */
-    eventHandler: {
+    beforeNavigate: {
       type: Function
     }
   },
   setup(props, context) {
-    const { slots, attrs } = context;
-    const link = useLink(props);
-    const wrapHandler = (externalHandler, internalHandler) => !internalHandler ? externalHandler : async (e) => {
-      try {
-        await externalHandler(e);
-      } finally {
-        await internalHandler(e);
-      }
-    };
-    const vue3renderer = () => {
-      var _a;
-      const data = link.value;
-      const genEventName = (name) => "on".concat(name.charAt(0).toUpperCase()).concat(name.slice(1));
-      const eventHandlers = data.getEventHandlers(genEventName);
-      Object.entries(attrs).forEach(([key, listener]) => {
-        if (!key.startsWith("on") || typeof listener !== "function")
-          return;
-        eventHandlers[key] = wrapHandler(listener, eventHandlers[key]);
-      });
-      return h(
-        data.tag,
-        {
-          ...data.attributes,
-          ...eventHandlers
-        },
-        (_a = slots.default) == null ? void 0 : _a.call(slots)
-      );
-    };
-    const vue2renderer = () => {
-      var _a;
-      const data = link.value;
-      const eventHandlers = data.getEventHandlers();
-      const $listeners = context.listeners || {};
-      Object.entries($listeners).forEach(([key, listener]) => {
-        if (typeof listener !== "function") return;
-        eventHandlers[key] = wrapHandler(listener, eventHandlers[key]);
-      });
-      const { class: className, ...attrs2 } = data.attributes;
+    const link = useLink(props).value;
+    if (isVue3) {
+      return () => {
+        var _a, _b;
+        return h(
+          link.tag,
+          {
+            ...link.attributes,
+            ...context.attrs,
+            ...link.createEventHandlers(
+              (name) => "on".concat(name.charAt(0).toUpperCase()).concat(name.slice(1))
+            )
+          },
+          (_b = (_a = context.slots).default) == null ? void 0 : _b.call(_a)
+        );
+      };
+    }
+    return () => {
+      var _a, _b;
+      const { class: className, ...attributes } = link.attributes;
       return h(
-        data.tag,
+        link.tag,
         {
-          attrs: attrs2,
+          attrs: {
+            ...attributes,
+            ...context.attrs
+          },
           class: className,
-          on: eventHandlers
+          on: link.createEventHandlers()
         },
-        (_a = slots.default) == null ? void 0 : _a.call(slots)
+        (_b = (_a = context.slots).default) == null ? void 0 : _b.call(_a)
       );
     };
-    return isVue3 ? vue3renderer : vue2renderer;
   }
 });

package/dist/router-link.test.mjs

@@ -51,7 +51,14 @@ describe("router-link.ts - RouterLink Component", () => {
       app.unmount();
     }
     if (router) {
-      router.destroy();
+      try {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        router.destroy();
+      } catch (error) {
+        if (!(error instanceof Error) || !error.message.includes("RouteTaskCancelledError")) {
+          console.warn("Router destruction error:", error);
+        }
+      }
     }
     if (container.parentNode) {
       container.parentNode.removeChild(container);
@@ -97,6 +104,29 @@ describe("router-link.ts - RouterLink Component", () => {
       expect(linkElement).toBeTruthy();
       expect(linkElement == null ? void 0 : linkElement.textContent).toBe("About Link");
     });
+    it("should render router link with custom attributes", async () => {
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            {
+              to: "/about",
+              "data-test": "custom-attr",
+              title: "Custom Title"
+            },
+            () => "Link with Attributes"
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const linkElement = container.querySelector("a");
+      expect(linkElement).toBeTruthy();
+      expect(linkElement == null ? void 0 : linkElement.getAttribute("data-test")).toBe("custom-attr");
+      expect(linkElement == null ? void 0 : linkElement.getAttribute("title")).toBe("Custom Title");
+    });
     it("should render with custom tag", async () => {
       const TestApp = defineComponent({
         setup() {
@@ -255,6 +285,36 @@ describe("router-link.ts - RouterLink Component", () => {
       expect(router.route.path).toBe("/about");
       expect(router.route.query.tab).toBe("info");
     });
+    it("should handle custom navigation handler", async () => {
+      let customHandlerCalled = false;
+      let receivedEventName = "";
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            {
+              to: "/about",
+              beforeNavigate: (event, eventName) => {
+                customHandlerCalled = true;
+                receivedEventName = eventName;
+                event.preventDefault();
+              }
+            },
+            () => "Custom Handler Link"
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const linkElement = container.querySelector("a");
+      expect(linkElement).toBeTruthy();
+      linkElement == null ? void 0 : linkElement.click();
+      await nextTick();
+      expect(customHandlerCalled).toBe(true);
+      expect(receivedEventName).toBe("click");
+    });
   });
   describe("Props Validation", () => {
     it("should accept string as to prop", async () => {

package/dist/use.d.ts

@@ -178,7 +178,7 @@ export declare function useProvideRouter(router: Router): void;
  * <template>
  *   <a
  *     v-bind="link.attributes"
- *     v-on="link.getEventHandlers()"
+ *     v-on="link.createEventHandlers()"
  *     :class="{ active: link.isActive }"
  *   >
  *     Home

package/package.json

@@ -50,7 +50,7 @@
         "vue": "^3.5.0 || ^2.7.0"
     },
     "dependencies": {
-        "@esmx/router": "3.0.0-rc.59"
+        "@esmx/router": "3.0.0-rc.62"
     },
     "devDependencies": {
         "@biomejs/biome": "1.9.4",
@@ -62,7 +62,7 @@
         "vue": "3.5.13",
         "vue2": "npm:vue@2.7.16"
     },
-    "version": "3.0.0-rc.59",
+    "version": "3.0.0-rc.62",
     "type": "module",
     "private": false,
     "exports": {
@@ -81,5 +81,5 @@
         "template",
         "public"
     ],
-    "gitHead": "d221aba2a43064b5666e714f42904ae80b2b57ad"
+    "gitHead": "e5a1e811403bf1db4437dff88c3ea8bc6b576f64"
 }

package/src/router-link.test.ts

@@ -66,7 +66,20 @@ describe('router-link.ts - RouterLink Component', () => {
             app.unmount();
         }
         if (router) {
-            router.destroy();
+            try {
+                // Wait for any pending navigation to complete before destroying
+                await new Promise((resolve) => setTimeout(resolve, 0));
+                router.destroy();
+            } catch (error) {
+                // Ignore router destruction errors, as they might be expected
+                // when navigation tasks are cancelled during cleanup
+                if (
+                    !(error instanceof Error) ||
+                    !error.message.includes('RouteTaskCancelledError')
+                ) {
+                    console.warn('Router destruction error:', error);
+                }
+            }
         }
         if (container.parentNode) {
             container.parentNode.removeChild(container);
@@ -129,6 +142,33 @@ describe('router-link.ts - RouterLink Component', () => {
             expect(linkElement?.textContent).toBe('About Link');
         });
 
+        it('should render router link with custom attributes', async () => {
+            const TestApp = defineComponent({
+                setup() {
+                    useProvideRouter(router);
+                    return () =>
+                        h(
+                            RouterLink,
+                            {
+                                to: '/about',
+                                'data-test': 'custom-attr',
+                                title: 'Custom Title'
+                            },
+                            () => 'Link with Attributes'
+                        );
+                }
+            });
+
+            app = createApp(TestApp);
+            app.mount(container);
+            await nextTick();
+
+            const linkElement = container.querySelector('a');
+            expect(linkElement).toBeTruthy();
+            expect(linkElement?.getAttribute('data-test')).toBe('custom-attr');
+            expect(linkElement?.getAttribute('title')).toBe('Custom Title');
+        });
+
         it('should render with custom tag', async () => {
             const TestApp = defineComponent({
                 setup() {
@@ -326,6 +366,47 @@ describe('router-link.ts - RouterLink Component', () => {
             expect(router.route.path).toBe('/about');
             expect(router.route.query.tab).toBe('info');
         });
+
+        it('should handle custom navigation handler', async () => {
+            let customHandlerCalled = false;
+            let receivedEventName = '';
+            const TestApp = defineComponent({
+                setup() {
+                    useProvideRouter(router);
+                    return () =>
+                        h(
+                            RouterLink,
+                            {
+                                to: '/about',
+                                beforeNavigate: (
+                                    event: Event,
+                                    eventName: string
+                                ) => {
+                                    customHandlerCalled = true;
+                                    receivedEventName = eventName;
+                                    event.preventDefault();
+                                }
+                            },
+                            () => 'Custom Handler Link'
+                        );
+                }
+            });
+
+            app = createApp(TestApp);
+            app.mount(container);
+            await nextTick();
+
+            const linkElement = container.querySelector('a');
+            expect(linkElement).toBeTruthy();
+
+            // Simulate click
+            linkElement?.click();
+            await nextTick();
+
+            // Check if custom handler was called with correct event name
+            expect(customHandlerCalled).toBe(true);
+            expect(receivedEventName).toBe('click');
+        });
     });
 
     describe('Props Validation', () => {

package/src/router-link.ts

@@ -1,9 +1,4 @@
-import type {
-    RouteLayerOptions,
-    RouteLocationInput,
-    RouteMatchType,
-    RouterLinkType
-} from '@esmx/router';
+import type { RouterLinkProps } from '@esmx/router';
 import { type PropType, defineComponent, h } from 'vue';
 import { useLink } from './use';
 import { isVue3 } from './util';
@@ -66,7 +61,7 @@ export const RouterLink = defineComponent({
          * @example '/home' | { path: '/user', query: { id: '123' } }
          */
         to: {
-            type: [String, Object] as PropType<RouteLocationInput>,
+            type: [String, Object] as PropType<RouterLinkProps['to']>,
             required: true
         },
         /**
@@ -74,12 +69,18 @@ export const RouterLink = defineComponent({
          * @default 'push'
          * @example 'push' | 'replace' | 'pushWindow' | 'replaceWindow' | 'pushLayer'
          */
-        type: { type: String as PropType<RouterLinkType>, default: 'push' },
+        type: {
+            type: String as PropType<RouterLinkProps['type']>,
+            default: 'push'
+        },
         /**
          * @deprecated Use 'type="replace"' instead
          * @example :replace={true} → type="replace"
          */
-        replace: { type: Boolean, default: false },
+        replace: {
+            type: Boolean as PropType<RouterLinkProps['replace']>,
+            default: false
+        },
         /**
          * How to match the active state.
          * - 'include': Match if current route includes this path
@@ -87,19 +88,24 @@ export const RouterLink = defineComponent({
          * - 'route': Match based on route configuration
          * @default 'include'
          */
-        exact: { type: String as PropType<RouteMatchType>, default: 'include' },
+        exact: {
+            type: String as PropType<RouterLinkProps['exact']>,
+            default: 'include'
+        },
         /**
          * CSS class to apply when link is active (route matches).
          * @example 'nav-active' | 'selected'
          */
-        activeClass: { type: String },
+        activeClass: {
+            type: String as PropType<RouterLinkProps['activeClass']>
+        },
         /**
          * Event(s) that trigger navigation. Can be string or array of strings.
          * @default 'click'
          * @example 'click' | ['click', 'mouseenter']
          */
         event: {
-            type: [String, Array] as PropType<string | string[]>,
+            type: [String, Array] as PropType<RouterLinkProps['event']>,
             default: 'click'
         },
         /**
@@ -107,108 +113,59 @@ export const RouterLink = defineComponent({
          * @default 'a'
          * @example 'button' | 'div' | 'span'
          */
-        tag: { type: String, default: 'a' },
+        tag: { type: String as PropType<RouterLinkProps['tag']>, default: 'a' },
         /**
          * Layer options for layer-based navigation.
          * Only used when type='pushLayer'.
          * @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
          */
-        layerOptions: { type: Object as PropType<RouteLayerOptions> },
+        layerOptions: {
+            type: Object as PropType<RouterLinkProps['layerOptions']>
+        },
         /**
-         * Custom event handler to control navigation behavior.
-         * Should return `true` to allow router to navigate, otherwise to prevent it.
+         * Custom navigation handler called before navigation.
+         * Receives the event object and the event name that triggered navigation.
          *
          * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
-         * @default
-         *
-         * (event: Event & Partial<MouseEvent>): boolean => {
-         *   // don't redirect with control keys
-         *   if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
-         *   // don't redirect when preventDefault called
-         *   if (e.defaultPrevented) return false;
-         *   // don't redirect on right click
-         *   if (e.button !== undefined && e.button !== 0) return false;
-         *   // don't redirect if `target="_blank"`
-         *   const target = e.currentTarget?.getAttribute?.('target') ?? '';
-         *   if (/\b_blank\b/i.test(target)) return false;
-         *   // Prevent default browser navigation to enable SPA routing
-         *   // Note: this may be a Weex event which doesn't have this method
-         *   if (e.preventDefault) e.preventDefault();
-         *
-         *  return true;
-         * }
          */
-        eventHandler: {
-            type: Function as PropType<
-                (event: Event) => boolean | undefined | void
-            >
+        beforeNavigate: {
+            type: Function as PropType<RouterLinkProps['beforeNavigate']>
         }
     },
 
     setup(props, context) {
-        const { slots, attrs } = context;
-        const link = useLink(props);
-
-        const wrapHandler = (
-            externalHandler: Function,
-            internalHandler: Function | undefined
-        ) =>
-            !internalHandler
-                ? (externalHandler as (e: Event) => Promise<void>)
-                : async (e: Event) => {
-                      try {
-                          await externalHandler(e);
-                      } finally {
-                          await internalHandler(e);
-                      }
-                  };
-
-        const vue3renderer = () => {
-            const data = link.value;
-            const genEventName = (name: string): string =>
-                `on${name.charAt(0).toUpperCase()}${name.slice(1)}`;
-
-            const eventHandlers = data.getEventHandlers(genEventName);
-            Object.entries(attrs).forEach(([key, listener]) => {
-                // In Vue 3, external event handlers are in attrs with 'on' prefix
-                if (!key.startsWith('on') || typeof listener !== 'function')
-                    return;
-                eventHandlers[key] = wrapHandler(listener, eventHandlers[key]);
-            });
+        const link = useLink(props).value;
 
+        if (isVue3) {
+            return () => {
+                return h(
+                    link.tag,
+                    {
+                        ...link.attributes,
+                        ...context.attrs,
+                        ...link.createEventHandlers(
+                            (name) =>
+                                `on${name.charAt(0).toUpperCase()}${name.slice(1)}`
+                        )
+                    },
+                    context.slots.default?.()
+                );
+            };
+        }
+        return () => {
+            const { class: className, ...attributes } = link.attributes;
             return h(
-                data.tag,
-                {
-                    ...data.attributes,
-                    ...eventHandlers
-                },
-                slots.default?.()
-            );
-        };
-
-        const vue2renderer = () => {
-            const data = link.value;
-
-            const eventHandlers = data.getEventHandlers();
-            // Vue 2: get external listeners from context
-            const $listeners = (context as any).listeners || {};
-            Object.entries($listeners).forEach(([key, listener]) => {
-                if (typeof listener !== 'function') return;
-                eventHandlers[key] = wrapHandler(listener, eventHandlers[key]);
-            });
-
-            const { class: className, ...attrs } = data.attributes;
-            return h(
-                data.tag,
+                link.tag,
                 {
-                    attrs,
+                    attrs: {
+                        ...attributes,
+                        ...context.attrs
+                    },
                     class: className,
-                    on: eventHandlers
+                    on: link.createEventHandlers()
                 },
-                slots.default?.()
+                context.slots.default?.()
             );
         };
-
-        return isVue3 ? vue3renderer : vue2renderer;
     }
 });

package/src/use.ts

@@ -294,7 +294,7 @@ export function useProvideRouter(router: Router): void {
  * <template>
  *   <a
  *     v-bind="link.attributes"
- *     v-on="link.getEventHandlers()"
+ *     v-on="link.createEventHandlers()"
  *     :class="{ active: link.isActive }"
  *   >
  *     Home