1---
2title: Route Param Changes Do Not Trigger Lifecycle Hooks
3impact: HIGH
4impactDescription: Navigating between routes with different params reuses the component instance, skipping created/mounted hooks and leaving stale data
5type: gotcha
6tags: [vue3, vue-router, lifecycle, params, reactivity]
7---
8 
9# Route Param Changes Do Not Trigger Lifecycle Hooks
10 
11**Impact: HIGH** - When navigating between routes that use the same component (e.g., `/users/1` to `/users/2`), Vue Router reuses the existing component instance for performance. This means `onMounted`, `created`, and other lifecycle hooks do NOT fire, leaving you with stale data from the previous route.
12 
13## Task Checklist
14 
15- [ ] Use `watch` on route params for data fetching
16- [ ] Or use `onBeforeRouteUpdate` in-component guard
17- [ ] Or use `:key="route.params.id"` to force re-creation (less efficient)
18- [ ] Never rely solely on `onMounted` for route-param-dependent data
19 
20## The Problem
21 
22```vue
23<!-- UserProfile.vue - Used for /users/:id -->
24<script setup>
25import { ref, onMounted } from 'vue'
26import { useRoute } from 'vue-router'
27 
28const route = useRoute()
29const user = ref(null)
30 
31// BUG: Only runs once when component first mounts!
32// Navigating from /users/1 to /users/2 does NOT trigger this
33onMounted(async () => {
34  user.value = await fetchUser(route.params.id)
35})
36</script>
37 
38<template>
39  <div>
40    <!-- Still shows User 1 data when navigating to /users/2! -->
41    <h1>{{ user?.name }}</h1>
42  </div>
43</template>
44```
45 
46**Scenario:**
471. Visit `/users/1` - Component mounts, fetches User 1 data
482. Navigate to `/users/2` - Component is REUSED, onMounted doesn't run
493. UI still shows User 1's data!
50 
51## Solution 1: Watch Route Params (Recommended)
52 
53```vue
54<script setup>
55import { ref, watch } from 'vue'
56import { useRoute } from 'vue-router'
57 
58const route = useRoute()
59const user = ref(null)
60const loading = ref(false)
61 
62// Watch for param changes - handles both initial load and navigation
63watch(
64  () => route.params.id,
65  async (newId) => {
66    loading.value = true
67    user.value = await fetchUser(newId)
68    loading.value = false
69  },
70  { immediate: true }  // Run immediately for initial load
71)
72</script>
73```
74 
75## Solution 2: Use onBeforeRouteUpdate Guard
76 
77```vue
78<script setup>
79import { ref, onMounted } from 'vue'
80import { useRoute, onBeforeRouteUpdate } from 'vue-router'
81 
82const route = useRoute()
83const user = ref(null)
84 
85async function loadUser(id) {
86  user.value = await fetchUser(id)
87}
88 
89// Initial load
90onMounted(() => loadUser(route.params.id))
91 
92// Handle param changes within same route
93onBeforeRouteUpdate(async (to, from) => {
94  if (to.params.id !== from.params.id) {
95    await loadUser(to.params.id)
96  }
97})
98</script>
99```
100 
101## Solution 3: Force Component Re-creation with Key
102 
103```vue
104<!-- App.vue or parent component -->
105<template>
106  <router-view :key="$route.fullPath" />
107</template>
108```
109 
110**Tradeoffs:**
111- Simple but less performant
112- Destroys and recreates component on every param change
113- Loses component state
114- Use only when component state should reset completely
115 
116## Solution 4: Composable for Route-Reactive Data
117 
118```javascript
119// composables/useRouteData.js
120import { ref, watch } from 'vue'
121import { useRoute } from 'vue-router'
122 
123export function useRouteData(paramName, fetcher) {
124  const route = useRoute()
125  const data = ref(null)
126  const loading = ref(false)
127  const error = ref(null)
128 
129  watch(
130    () => route.params[paramName],
131    async (id) => {
132      if (!id) return
133 
134      loading.value = true
135      error.value = null
136 
137      try {
138        data.value = await fetcher(id)
139      } catch (e) {
140        error.value = e
141      } finally {
142        loading.value = false
143      }
144    },
145    { immediate: true }
146  )
147 
148  return { data, loading, error }
149}
150```
151 
152```vue
153<!-- Usage in component -->
154<script setup>
155import { useRouteData } from '@/composables/useRouteData'
156import { fetchUser } from '@/api/users'
157 
158const { data: user, loading, error } = useRouteData('id', fetchUser)
159</script>
160```
161 
162## What Triggers vs. What Doesn't
163 
164| Navigation Type | Lifecycle Hooks | beforeRouteUpdate | Watch on params |
165|----------------|-----------------|-------------------|-----------------|
166| `/users/1` to `/posts/1` | YES | NO | YES |
167| `/users/1` to `/users/2` | NO | YES | YES |
168| `/users/1?tab=a` to `/users/1?tab=b` | NO | YES | NO (different watch) |
169| `/users/1` to `/users/1` (same) | NO | NO | NO |
170 
171## Key Points
172 
1731. **Same route, different params = same component instance** - This is a performance optimization
1742. **Lifecycle hooks only fire once** - When component first mounts
1753. **Use `watch` with `immediate: true`** - Covers both initial load and updates
1764. **`onBeforeRouteUpdate` is navigation-aware** - Good for data that must load before view updates
1775. **`:key="route.fullPath"` is a sledgehammer** - Use only when necessary
178 
179## Reference
180- [Vue Router Dynamic Route Matching](https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes)
181- [Vue School: Reacting to Param Changes](https://vueschool.io/lessons/reacting-to-param-changes)
182