@esmx/router-vue 3.0.0-rc.60 → 3.0.0-rc.63

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="https://www.esmnext.com/logo.svg?t=2025" width="120" alt="Esmx Logo" />
+  <img src="https://esmx.dev/logo.svg?t=2025" width="120" alt="Esmx Logo" />
   <h1>@esmx/router-vue</h1>
   
   <div>
@@ -9,7 +9,7 @@
     <a href="https://github.com/esmnext/esmx/actions/workflows/build.yml">
       <img src="https://github.com/esmnext/esmx/actions/workflows/build.yml/badge.svg" alt="Build" />
     </a>
-    <a href="https://www.esmnext.com/coverage/">
+    <a href="https://esmx.dev/coverage/">
       <img src="https://img.shields.io/badge/coverage-live%20report-brightgreen" alt="Coverage Report" />
     </a>
     <a href="https://nodejs.org/">
@@ -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

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="https://www.esmnext.com/logo.svg?t=2025" width="120" alt="Esmx Logo" />
+  <img src="https://esmx.dev/logo.svg?t=2025" width="120" alt="Esmx Logo" />
   <h1>@esmx/router-vue</h1>
   
   <div>
@@ -9,7 +9,7 @@
     <a href="https://github.com/esmnext/esmx/actions/workflows/build.yml">
       <img src="https://github.com/esmnext/esmx/actions/workflows/build.yml/badge.svg" alt="Build" />
     </a>
-    <a href="https://www.esmnext.com/coverage/">
+    <a href="https://esmx.dev/coverage/">
       <img src="https://img.shields.io/badge/coverage-live%20report-brightgreen" alt="Coverage Report" />
     </a>
     <a href="https://nodejs.org/">
@@ -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/index.d.ts

@@ -2,5 +2,5 @@ export type * from './vue2';
 export type * from './vue3';
 export { useRouter, useRoute, useProvideRouter, useLink, getRoute, getRouter } from './use';
 export { RouterLink } from './router-link';
-export { RouterView } from './router-view';
+export { RouterView, RouterViewDepth } from './router-view';
 export { RouterPlugin } from './plugin';

package/dist/index.mjs

@@ -7,5 +7,5 @@ export {
   getRouter
 } from "./use.mjs";
 export { RouterLink } from "./router-link.mjs";
-export { RouterView } from "./router-view.mjs";
+export { RouterView, RouterViewDepth } from "./router-view.mjs";
 export { RouterPlugin } from "./plugin.mjs";

package/dist/index.test.mjs

@@ -66,6 +66,7 @@ describe("index.ts - Package Entry Point", () => {
         // Components
         "RouterLink",
         "RouterView",
+        "RouterViewDepth",
         // Plugin
         "RouterPlugin"
       ];
@@ -87,6 +88,7 @@ describe("index.ts - Package Entry Point", () => {
         "getRoute",
         "RouterLink",
         "RouterView",
+        "RouterViewDepth",
         "RouterPlugin"
       ];
       const unexpectedExports = actualExports.filter(

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/router-view.d.ts

@@ -1,3 +1,4 @@
+export declare const RouterViewDepth: unique symbol;
 /**
  * RouterView component for rendering matched route components.
  * Acts as a placeholder where route components are rendered based on the current route.

package/dist/router-view.mjs

@@ -1,13 +1,13 @@
 import { defineComponent, h, inject, provide } from "vue";
 import { useRoute } from "./use.mjs";
 import { resolveComponent } from "./util.mjs";
-const RouterViewDepthKey = Symbol("RouterViewDepth");
+export const RouterViewDepth = Symbol("RouterViewDepth");
 export const RouterView = defineComponent({
   name: "RouterView",
   setup() {
     const route = useRoute();
-    const depth = inject(RouterViewDepthKey, 0);
-    provide(RouterViewDepthKey, depth + 1);
+    const depth = inject(RouterViewDepth, 0);
+    provide(RouterViewDepth, depth + 1);
     return () => {
       const matchedRoute = route.matched[depth];
       const component = matchedRoute ? resolveComponent(matchedRoute.component) : null;

package/dist/router-view.test.mjs

@@ -170,11 +170,11 @@ describe("router-view.ts - RouterView Component", () => {
   describe("Depth Tracking", () => {
     it("should inject depth 0 by default", async () => {
       let injectedDepth;
-      const RouterViewDepthKey = Symbol("RouterViewDepth");
+      const RouterViewDepth = Symbol("RouterViewDepth");
       const TestRouterView = defineComponent({
         name: "TestRouterView",
         setup() {
-          injectedDepth = inject(RouterViewDepthKey, -1);
+          injectedDepth = inject(RouterViewDepth, -1);
           return () => h(RouterView);
         }
       });
@@ -193,19 +193,19 @@ describe("router-view.ts - RouterView Component", () => {
     it("should provide correct depth in nested RouterViews", async () => {
       let parentDepth;
       let childDepth;
-      const RouterViewDepthKey = Symbol("RouterViewDepth");
+      const RouterViewDepth = Symbol("RouterViewDepth");
       const ParentTestComponent = defineComponent({
         name: "ParentTestComponent",
         setup() {
-          parentDepth = inject(RouterViewDepthKey, -1);
-          provide(RouterViewDepthKey, 0);
+          parentDepth = inject(RouterViewDepth, -1);
+          provide(RouterViewDepth, 0);
           return () => h("div", [h("span", "Parent"), h(ChildTestComponent)]);
         }
       });
       const ChildTestComponent = defineComponent({
         name: "ChildTestComponent",
         setup() {
-          childDepth = inject(RouterViewDepthKey, -1);
+          childDepth = inject(RouterViewDepth, -1);
           return () => h("div", "Child");
         }
       });
@@ -272,12 +272,12 @@ describe("router-view.ts - RouterView Component", () => {
   });
   describe("Edge Cases and Error Handling", () => {
     it("should render null when no route matches at current depth", async () => {
-      const RouterViewDepthKey = Symbol("RouterViewDepth");
+      const RouterViewDepth = Symbol("RouterViewDepth");
       const DeepRouterView = defineComponent({
         name: "DeepRouterView",
         setup() {
-          const currentDepth = inject(RouterViewDepthKey, 0);
-          provide(RouterViewDepthKey, currentDepth + 1);
+          const currentDepth = inject(RouterViewDepth, 0);
+          provide(RouterViewDepth, currentDepth + 1);
           return () => h(RouterView);
         }
       });

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/dist/use.mjs

@@ -62,7 +62,7 @@ export function useRoute() {
 }
 export function useProvideRouter(router) {
   const proxy = getCurrentProxy("useProvideRouter");
-  const dep = ref(false);
+  const dep = ref(0);
   const proxiedRouter = createDependentProxy(router, dep);
   const proxiedRoute = createDependentProxy(router.route, dep);
   const context = {
@@ -74,7 +74,7 @@ export function useProvideRouter(router) {
   const unwatch = router.afterEach((to) => {
     if (router.route === to) {
       to.syncTo(proxiedRoute);
-      dep.value = !dep.value;
+      dep.value++;
     }
   });
   onBeforeUnmount(unwatch);

package/dist/util.d.ts

@@ -4,6 +4,6 @@ export declare function createSymbolProperty<T>(symbol: symbol): {
     readonly set: (instance: any, value: T) => void;
     readonly get: (instance: any) => T | undefined;
 };
-export declare function createDependentProxy<T extends object>(obj: T, dep: Ref<boolean>): T;
+export declare function createDependentProxy<T extends object>(obj: T, dep: Ref<any>): T;
 export declare function isESModule(obj: unknown): obj is Record<string | symbol, any>;
 export declare function resolveComponent(component: unknown): unknown;

package/package.json

@@ -50,7 +50,7 @@
         "vue": "^3.5.0 || ^2.7.0"
     },
     "dependencies": {
-        "@esmx/router": "3.0.0-rc.60"
+        "@esmx/router": "3.0.0-rc.63"
     },
     "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.60",
+    "version": "3.0.0-rc.63",
     "type": "module",
     "private": false,
     "exports": {
@@ -81,5 +81,5 @@
         "template",
         "public"
     ],
-    "gitHead": "615e91c617e0a58796c591643c6a2e1d2a1f0a76"
+    "gitHead": "18a524ff1b7f9c6ea60d8bb57ad314329febc58c"
 }

package/src/index.test.ts

@@ -79,6 +79,7 @@ describe('index.ts - Package Entry Point', () => {
                 // Components
                 'RouterLink',
                 'RouterView',
+                'RouterViewDepth',
                 // Plugin
                 'RouterPlugin'
             ];
@@ -102,6 +103,7 @@ describe('index.ts - Package Entry Point', () => {
                 'getRoute',
                 'RouterLink',
                 'RouterView',
+                'RouterViewDepth',
                 'RouterPlugin'
             ];
 

package/src/index.ts

@@ -11,6 +11,6 @@ export {
 } from './use';
 
 export { RouterLink } from './router-link';
-export { RouterView } from './router-view';
+export { RouterView, RouterViewDepth } from './router-view';
 
 export { RouterPlugin } from './plugin';

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/router-view.test.ts

@@ -231,13 +231,13 @@ describe('router-view.ts - RouterView Component', () => {
             let injectedDepth: number | undefined;
 
             // Use the same symbol key that RouterView uses internally
-            const RouterViewDepthKey = Symbol('RouterViewDepth');
+            const RouterViewDepth = Symbol('RouterViewDepth');
 
             // Create a custom RouterView component that can capture the injected depth
             const TestRouterView = defineComponent({
                 name: 'TestRouterView',
                 setup() {
-                    injectedDepth = inject(RouterViewDepthKey, -1);
+                    injectedDepth = inject(RouterViewDepth, -1);
                     return () => h(RouterView);
                 }
             });
@@ -263,13 +263,13 @@ describe('router-view.ts - RouterView Component', () => {
             let parentDepth: number | undefined;
             let childDepth: number | undefined;
 
-            const RouterViewDepthKey = Symbol('RouterViewDepth');
+            const RouterViewDepth = Symbol('RouterViewDepth');
 
             const ParentTestComponent = defineComponent({
                 name: 'ParentTestComponent',
                 setup() {
-                    parentDepth = inject(RouterViewDepthKey, -1);
-                    provide(RouterViewDepthKey, 0); // Simulate parent RouterView
+                    parentDepth = inject(RouterViewDepth, -1);
+                    provide(RouterViewDepth, 0); // Simulate parent RouterView
                     return () =>
                         h('div', [h('span', 'Parent'), h(ChildTestComponent)]);
                 }
@@ -278,7 +278,7 @@ describe('router-view.ts - RouterView Component', () => {
             const ChildTestComponent = defineComponent({
                 name: 'ChildTestComponent',
                 setup() {
-                    childDepth = inject(RouterViewDepthKey, -1);
+                    childDepth = inject(RouterViewDepth, -1);
                     return () => h('div', 'Child');
                 }
             });
@@ -362,14 +362,14 @@ describe('router-view.ts - RouterView Component', () => {
 
     describe('Edge Cases and Error Handling', () => {
         it('should render null when no route matches at current depth', async () => {
-            const RouterViewDepthKey = Symbol('RouterViewDepth');
+            const RouterViewDepth = Symbol('RouterViewDepth');
 
             const DeepRouterView = defineComponent({
                 name: 'DeepRouterView',
                 setup() {
                     // Inject depth 0 from parent RouterView and provide depth 1
-                    const currentDepth = inject(RouterViewDepthKey, 0);
-                    provide(RouterViewDepthKey, currentDepth + 1);
+                    const currentDepth = inject(RouterViewDepth, 0);
+                    provide(RouterViewDepth, currentDepth + 1);
                     return () => h(RouterView);
                 }
             });

package/src/router-view.ts

@@ -2,7 +2,7 @@ import { defineComponent, h, inject, provide } from 'vue';
 import { useRoute } from './use';
 import { resolveComponent } from './util';
 
-const RouterViewDepthKey = Symbol('RouterViewDepth');
+export const RouterViewDepth = Symbol('RouterViewDepth');
 
 /**
  * RouterView component for rendering matched route components.
@@ -39,11 +39,11 @@ export const RouterView = defineComponent({
 
         // Get current RouterView depth from parent RouterView (if any)
         // This enables proper nested routing by tracking how deep we are in the component tree
-        const depth = inject(RouterViewDepthKey, 0);
+        const depth = inject(RouterViewDepth, 0);
 
         // Provide depth + 1 to child RouterView components
         // This ensures each nested RouterView renders the correct route component
-        provide(RouterViewDepthKey, depth + 1);
+        provide(RouterViewDepth, depth + 1);
 
         return () => {
             // Get the matched route configuration at current depth

package/src/use.ts

@@ -259,7 +259,7 @@ export function useRoute(): Route {
 export function useProvideRouter(router: Router): void {
     const proxy = getCurrentProxy('useProvideRouter');
 
-    const dep = ref(false);
+    const dep = ref(0);
 
     const proxiedRouter = createDependentProxy(router, dep);
     const proxiedRoute = createDependentProxy(router.route, dep);
@@ -275,7 +275,7 @@ export function useProvideRouter(router: Router): void {
     const unwatch = router.afterEach((to: Route) => {
         if (router.route === to) {
             to.syncTo(proxiedRoute);
-            dep.value = !dep.value;
+            dep.value++;
         }
     });
 
@@ -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

package/src/util.ts

@@ -16,7 +16,7 @@ export function createSymbolProperty<T>(symbol: symbol) {
 
 export function createDependentProxy<T extends object>(
     obj: T,
-    dep: Ref<boolean>
+    dep: Ref<any>
 ): T {
     return new Proxy(obj, {
         get(target, prop, receiver) {