Vue Router Navigation and Route Params

Learn how to navigate programmatically, access route parameters, and use named routes.

Accessing Route Params

<!-- views/UserView.vue -->
<script setup>
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'

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

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

// Watch for param changes (same component, different ID)
watch(() => route.params.id, loadUser, { immediate: true })
</script>

<template>
  <div v-if="user">
    <h1>{{ user.name }}</h1>
    <p>ID: {{ route.params.id }}</p>
  </div>
</template>

Programmatic Navigation

import { useRouter } from 'vue-router'

const router = useRouter()

// Push a new route
router.push('/about')
router.push({ path: '/user/42' })
router.push({ name: 'user', params: { id: 42 } })
router.push({ name: 'search', query: { q: 'vue' } })

// Replace (no history entry)
router.replace('/login')

// Go back / forward
router.back()
router.go(-2)

Named Routes

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: UserView,
  }
]

<RouterLink :to="{ name: 'user', params: { id: 42 } }">
  View User
</RouterLink>