From 46b616fc3f44124c28c5166e80d6124a72e56742 Mon Sep 17 00:00:00 2001 From: babu-ch Date: Tue, 31 Mar 2026 20:08:38 +0900 Subject: [PATCH 1/4] Add router-link coexistence demo and document gotcha with replace prop Demonstrate that the interceptor works alongside in the playground. Add a gotcha section showing that loses its replace behavior when the callback calls preventDefault() + router.push(), and show the data-no-intercept workaround. Add a Framework Router Coexistence section to the README. Co-Authored-By: Claude Opus 4.6 (1M context) --- README.md | 9 +++++++++ playground/src/App.vue | 12 +++++++----- playground/src/i18n/en.ts | 15 +++++++++++++++ playground/src/i18n/ja.ts | 15 +++++++++++++++ playground/src/main.ts | 17 +++++++++++++++-- playground/src/pages/Internal.vue | 20 ++++++++++++++++++++ 6 files changed, 81 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 34ac638..3789e6b 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,15 @@ Registers a capture-phase click listener on `document`. Returns a cleanup functi - Mutating `ctx.url` automatically updates `anchor.href` - Calling `ctx.preventDefault()` cancels navigation +## Framework Router Coexistence + +The interceptor captures **all** `` clicks in the capture phase, including those rendered by framework router components (``, React Router ``, etc.). This works correctly because: + +- If your `onInternalLink` calls `ctx.preventDefault()`, the router component's own handler sees `event.defaultPrevented === true` and skips its navigation — no double navigation occurs. +- If your `onInternalLink` does **not** call `ctx.preventDefault()` (e.g. analytics only), the router component handles navigation normally. + +No special configuration is needed. The interceptor and framework routers work side by side out of the box. + ## Use Cases | Use Case | Link Type | Example | diff --git a/playground/src/App.vue b/playground/src/App.vue index ebf21d8..8e7b82a 100644 --- a/playground/src/App.vue +++ b/playground/src/App.vue @@ -31,9 +31,9 @@ console.log = (...args: unknown[]) => {