Route parameters with useRoute in Vue - Step-by-Step Execution

Concept Flow - Route parameters with useRoute

User navigates to URL with parameter

↓

Vue Router reads URL

↓

useRoute() hook accesses current route

↓

Extract parameter from route.params

↓

Component uses parameter to display data

↓

Rendered output updates with parameter value

This flow shows how Vue Router reads the URL, useRoute() accesses the current route, extracts parameters, and the component updates its display accordingly.

Execution Sample

Vue

import { useRoute } from 'vue-router'
import { computed } from 'vue'

export default {
  setup() {
    const route = useRoute()
    const id = computed(() => route.params.id)
    return { id }
  }
}

This code uses useRoute to get the current route and extracts the 'id' parameter to use in the component.

Execution Table

Step	Action	Route URL	route.params	Extracted id	Component Output
1	User navigates to /user/42	/user/42	{ id: '42' }	42	id = 42 displayed
2	useRoute() reads current route	/user/42	{ id: '42' }	42	id = 42 displayed
3	Component extracts id from route.params	/user/42	{ id: '42' }	42	id = 42 displayed
4	Component renders with id	/user/42	{ id: '42' }	42	Shows user ID: 42
5	User navigates to /user/99	/user/99	{ id: '99' }	99	Shows user ID: 99
6	Component updates with new id	/user/99	{ id: '99' }	99	Shows user ID: 99
7	User navigates to /user without id	/user	{}	undefined	Shows user ID: undefined
8	Component tries to extract id but none found	/user	{}	undefined	Shows user ID: undefined
9	Execution ends as user stops navigation	/user	{}	undefined	Final display with id undefined

💡 Execution stops when user stops navigating or component unmounts.

Variable Tracker

Variable	Start	After Step 1	After Step 5	After Step 7	Final
route.params	{}	{ id: '42' }	{ id: '99' }	{}	{}
id	undefined	42	99	undefined	undefined

Key Moments - 2 Insights

Why is id sometimes undefined in the component?

If the URL does not include the parameter (like /user without /:id), route.params.id is undefined, as shown in execution_table rows 7 and 8.

Does useRoute() update automatically when the URL changes?

Yes, useRoute() always reflects the current route, so when the user navigates to a new URL with a different parameter, the id updates as shown in rows 5 and 6.

Visual Quiz - 3 Questions

Look at the execution table at step 3. What is the value of id extracted from route.params?

A 99

B 42

C undefined

D {}

💡 Hint

Check the 'Extracted id' column at step 3 in the execution_table.

At which step does the component first display id as '99'?

A Step 2

B Step 7

C Step 5

D Step 8

💡 Hint

Look for 'Shows user ID: 99' in the 'Component Output' column.

If the user navigates to /user/123, what will route.params.id be?

A '123'

B '42'

C '99'

D undefined

💡 Hint

route.params.id matches the URL parameter after /user/ as shown in variable_tracker.

Concept Snapshot

Use useRoute() to access the current route object.
Extract parameters from route.params, e.g., route.params.id.
Parameters come from dynamic segments in the URL.
When URL changes, useRoute() updates automatically.
Use extracted params to render dynamic content.

Full Transcript

This visual execution shows how Vue Router's useRoute hook accesses the current route and extracts parameters from the URL. When a user navigates to a URL like /user/42, the route.params object contains { id: '42' }. The component uses useRoute() to get this object and extracts the id parameter to display it. If the user navigates to a different URL with a different id, useRoute() updates automatically and the component re-renders with the new id. If the URL lacks the parameter, the id is undefined. This flow helps beginners see how route parameters flow from the URL into the component's reactive data.