fix: trigger navigation guards when keep-alive component is reactivated for different route by babu-ch · Pull Request #2604 · vuejs/router

babu-ch · 2026-01-16T10:40:47Z

Summary by CodeRabbit

Bug Fixes
- Improved route-guard registration and lifecycle with kept-alive/shared components so guards are associated with the correct active route, re-registered on reactivation, and emit developer warnings when active records are missing.
Tests
- Added comprehensive tests verifying guard invocation, activation/deactivation counts, reactivation across routes, and onBeforeRouteUpdate/onBeforeRouteLeave behavior for shared KeepAlive components.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

…ted for different route

netlify · 2026-01-16T10:40:53Z

✅ Deploy Preview for vue-router canceled.

Name	Link
🔨 Latest commit	`c4255ba`
🔍 Latest deploy log	https://app.netlify.com/projects/vue-router/deploys/696f880321118a0008a57a89

coderabbitai · 2026-01-16T10:40:58Z

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

Refactors guard registration to use a ComputedRef for the active route record so guards can be re-registered when a KeepAlive-wrapped component is reactivated for a different route. Adds tests for onBeforeRouteLeave and onBeforeRouteUpdate covering shared KeepAlive components and tracks activation/deactivation and guard invocation/registration.

Changes

Cohort / File(s)	Summary
Guard registration core `packages/router/src/navigationGuards.ts`	Accept and use a `ComputedRef<RouteRecordNormalized \| undefined>` when registering guards; resolve the active record at registration and on activation, re-register guards if the active record changes, and emit dev warnings when no active record is found.
onBeforeRouteLeave tests `packages/router/__tests__/guards/onBeforeRouteLeave.spec.ts`	Add test "triggers when shared KeepAlive component is reactivated for a different route": introduces `SharedComponent` with `onBeforeRouteLeave`, `onActivated`, `onDeactivated`, mounts a `keep-alive` wrapped `RouterView`, navigates through routes, and asserts guard registration/invocation and activation/deactivation counts; adds imports for `onActivated`, `onDeactivated`, and `mount`; uses `RouteRecordRaw`.
onBeforeRouteUpdate tests `packages/router/__tests__/guards/onBeforeRouteUpdate.spec.ts`	Add test covering `onBeforeRouteUpdate` with a shared `KeepAlive` component across routes and query updates; tracks activation/deactivation, simulates navigations and query change to assert guard firing; switches to `type RouteRecordRaw` import and adds `onActivated`/`onDeactivated` imports.

Sequence Diagram(s)

sequenceDiagram
    participant Client as Client
    participant Router as Router
    participant KeepAlive as KeepAlive
    participant Component as Component
    participant GuardRegistry as Guard Registry
    participant RouteRecord as Route Record

    Client->>Router: navigate(to Route A)
    Router->>KeepAlive: render/update <rgba(100,150,240,0.5)>
    KeepAlive->>Component: mount / onActivated
    Component->>GuardRegistry: registerGuard(computedActiveRecordRef)
    GuardRegistry->>RouteRecord: resolve currentRecord from ref
    GuardRegistry->>RouteRecord: attach guard to currentRecord

    Client->>Router: navigate(to Route B, same kept component)
    Router->>KeepAlive: update (component kept alive) <rgba(180,120,200,0.5)>
    KeepAlive->>Component: onDeactivated -> onActivated
    Component->>GuardRegistry: resolve currentRecord from ref
    GuardRegistry->>RouteRecord: detect new record
    GuardRegistry->>RouteRecord: remove guard from old, attach to new

    Client->>Router: route params/query update
    Router->>GuardRegistry: invoke guards for currentRecord
    GuardRegistry-->>Router: guard result

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

fix: trigger navigation guards when keep-alive component is reactivated for different route #2604: Adds the same keep-alive reactivation tests and updates navigationGuards to register guards using a ComputedRef-active route (strongly related fix).

Poem

🐰 I hopped through routes both near and far,
Kept alive inside a cozy jar,
ComputedRef pointed which record to meet,
Guards hopped along and found their seat,
Reactivated paths now line up neat. 🥕✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing navigation guards triggering on keep-alive component reactivation for different routes, which matches the primary objective.
Linked Issues check	✅ Passed	The PR addresses issue `#2601` by modifying navigation guard registration to use ComputedRef for active route records, ensuring guards trigger on keep-alive reactivation with route changes [`#2601`].
Out of Scope Changes check	✅ Passed	All changes are within scope: test additions verify the fix works for keep-alive reactivation scenarios, and navigationGuards.ts modifications implement the core fix for guard registration with ComputedRef.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-01-16T10:59:08Z

Open in StackBlitz

npm i https://pkg.pr.new/vue-router@2604

commit: 53a641d

posva

Thanks!

codecov · 2026-01-20T13:39:22Z

Codecov Report

❌ Patch coverage is 59.37500% with 13 lines in your changes missing coverage. Please review.
✅ Project coverage is 91.54%. Comparing base (a705f4f) to head (53a641d).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/router/src/navigationGuards.ts	59.37%	13 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2604      +/-   ##
==========================================
+ Coverage   91.27%   91.54%   +0.27%     
==========================================
  Files          46       46              
  Lines        4181     4188       +7     
  Branches     1114     1116       +2     
==========================================
+ Hits         3816     3834      +18     
+ Misses        358      347      -11     
  Partials        7        7

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@packages/router/__tests__/guards/onBeforeRouteLeave.spec.ts`:
- Around line 77-79: Update the Step 2 comment to accurately describe the
navigation: change the text that currently says navigating to `/a/123` to
reflect that the test actually calls `await router.push('/other')` (e.g., "Step
2: Navigate to /other - SharedComponent is deactivated (kept alive); Leave guard
is called when leaving /a"). This ensures the comment next to the `await
router.push('/other')` line matches the action being performed.

In `@packages/router/__tests__/guards/onBeforeRouteUpdate.spec.ts`:
- Around line 120-123: Update the inline comment that currently reads "// BUG:
The guard was registered with /a's record, not /b's record // So when /b
updates, the guard is not called" to clearly state this is the pre-fix behavior
and contrasts with the test assertion; reference the router.push('/b?page=2')
step and onBeforeRouteUpdate guard so the comment reads that before the fix the
guard was registered to /a (so updating /b did not trigger it), whereas the test
now asserts the guard is called after the fix.

packages/router/__tests__/guards/onBeforeRouteLeave.spec.ts

packages/router/__tests__/guards/onBeforeRouteUpdate.spec.ts

babu-ch · 2026-01-21T04:45:44Z

@posva
Thank you for the fine tuning and review!

fix: trigger navigation guards when keep-alive component is reactiva…

de8f589

…ted for different route

test: use spies

53a641d

posva approved these changes Jan 20, 2026

View reviewed changes

coderabbitai bot reviewed Jan 20, 2026

View reviewed changes

packages/router/__tests__/guards/onBeforeRouteLeave.spec.ts Outdated Show resolved Hide resolved

packages/router/__tests__/guards/onBeforeRouteUpdate.spec.ts Show resolved Hide resolved

test: simplify

c4255ba

posva merged commit c7735d3 into vuejs:main Jan 20, 2026
4 of 5 checks passed

babu-ch deleted the fix/keepalive branch January 21, 2026 04:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: trigger navigation guards when keep-alive component is reactivated for different route#2604

fix: trigger navigation guards when keep-alive component is reactivated for different route#2604
posva merged 3 commits intovuejs:mainfrom
babu-ch:fix/keepalive

babu-ch commented Jan 16, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

netlify bot commented Jan 16, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Jan 16, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

pkg-pr-new bot commented Jan 16, 2026 •

edited

Loading

Uh oh!

posva left a comment

Uh oh!

codecov bot commented Jan 20, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

babu-ch commented Jan 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

babu-ch commented Jan 16, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

netlify bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vue-router canceled.

Uh oh!

coderabbitai bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

pkg-pr-new bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

posva left a comment

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jan 20, 2026

Codecov Report

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

babu-ch commented Jan 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

babu-ch commented Jan 16, 2026 •

edited by coderabbitai bot

Loading

netlify bot commented Jan 16, 2026 •

edited

Loading

coderabbitai bot commented Jan 16, 2026 •

edited

Loading

pkg-pr-new bot commented Jan 16, 2026 •

edited

Loading