/vue-router-best-practices

Route Param Changes Do Not Trigger Lifecycle Hooks

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.

Task Checklist

• Use watch on route params for data fetching
• Or use onBeforeRouteUpdate in-component guard
• Or use :key="route.params.id" to force re-creation (less efficient)
• Never rely solely on onMounted for route-param-dependent data

The Problem

<!-- UserProfile.vue - Used for /users/:id -->
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const user = ref(null)

// BUG: Only runs once when component first mounts!
// Navigating from /users/1 to /users/2 does NOT trigger this
onMounted(async () => {
  user.value = await fetchUser(route.params.id)
})
</script>

<template>
  <div>
    <!-- Still shows User 1 data when navigating to /users/2! -->
    <h1>{{ user?.name }}</h1>
  </div>
</template>

Scenario:

1. Visit /users/1 - Component mounts, fetches User 1 data
2. Navigate to /users/2 - Component is REUSED, onMounted doesn't run
3. UI still shows User 1's data!

Solution 1: Watch Route Params (Recommended)

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const user = ref(null)
const loading = ref(false)

// Watch for param changes - handles both initial load and navigation
watch(
  () => route.params.id,
  async (newId) => {
    loading.value = true
    user.value = await fetchUser(newId)
    loading.value = false
  },
  { immediate: true }  // Run immediately for initial load
)
</script>

Solution 2: Use onBeforeRouteUpdate Guard

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'

const route = useRoute()
const user = ref(null)

async function loadUser(id) {
  user.value = await fetchUser(id)
}

// Initial load
onMounted(() => loadUser(route.params.id))

// Handle param changes within same route
onBeforeRouteUpdate(async (to, from) => {
  if (to.params.id !== from.params.id) {
    await loadUser(to.params.id)
  }
})
</script>

Solution 3: Force Component Re-creation with Key

<!-- App.vue or parent component -->
<template>
  <router-view :key="$route.fullPath" />
</template>

Tradeoffs:

• Simple but less performant
• Destroys and recreates component on every param change
• Loses component state
• Use only when component state should reset completely

Solution 4: Composable for Route-Reactive Data

// composables/useRouteData.js
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

export function useRouteData(paramName, fetcher) {
  const route = useRoute()
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)

  watch(
    () => route.params[paramName],
    async (id) => {
      if (!id) return

      loading.value = true
      error.value = null

      try {
        data.value = await fetcher(id)
      } catch (e) {
        error.value = e
      } finally {
        loading.value = false
      }
    },
    { immediate: true }
  )

  return { data, loading, error }
}

<!-- Usage in component -->
<script setup>
import { useRouteData } from '@/composables/useRouteData'
import { fetchUser } from '@/api/users'

const { data: user, loading, error } = useRouteData('id', fetchUser)
</script>

What Triggers vs. What Doesn't

Key Points

1. Same route, different params = same component instance - This is a performance optimization
2. Lifecycle hooks only fire once - When component first mounts
3. Use watch with immediate: true - Covers both initial load and updates
4. onBeforeRouteUpdate is navigation-aware - Good for data that must load before view updates
5. :key="route.fullPath" is a sledgehammer - Use only when necessary

Reference

• Vue Router Dynamic Route Matching
• Vue School: Reacting to Param Changes