Programmatic navigation with useRouter in Vue - Performance & Optimization

Performance: Programmatic navigation with useRouter

MEDIUM IMPACT

This affects page navigation speed and user interaction responsiveness when changing routes programmatically.

Navigating between pages on user action

Vue

const router = useRouter();
function goToPage() {
  router.push('/page2');
}

Only one route change is triggered, reducing unnecessary renders and improving responsiveness.

📈 Performance Gainsingle route change, faster interaction response

Navigating between pages on user action

Vue

const router = useRouter();
function goToPage() {
  router.push('/page1');
  router.push('/page2');
}

Triggering multiple route changes in quick succession causes redundant renders and blocks user interaction.

📉 Performance Costblocks rendering for 100+ms due to multiple route changes

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple rapid router.push calls	High (many DOM updates)	Multiple reflows	High paint cost	[X] Bad
Single router.push call	Low (one DOM update)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Programmatic navigation triggers route changes that cause the framework to update the DOM and re-render components for the new page.

→JavaScript Execution

→Layout

→Paint

→Composite

⚠️ BottleneckJavaScript Execution and Layout due to component re-rendering

Core Web Vital Affected

INP

This affects page navigation speed and user interaction responsiveness when changing routes programmatically.

Optimization Tips

1Avoid calling router.push multiple times in a row.

2Batch or debounce navigation calls to reduce re-renders.

3Use programmatic navigation only when necessary to improve INP.

Performance Quiz - 3 Questions

What is the main performance risk of calling router.push multiple times quickly?

A It improves page load speed.

B It causes multiple re-renders and blocks user interaction.

C It reduces bundle size.

D It decreases memory usage.

DevTools: Performance

How to check: Record a session while triggering programmatic navigation. Look for multiple layout and paint events caused by route changes.

What to look for: Check for long scripting times and multiple reflows indicating redundant route changes.