jsschools
Route Params & Query

Read From useRoute(); Navigate With useRouter()

Route Params & Query

useRoute reads the current params, query, and path; useRouter triggers programmatic navigation. Both are reactive.

4 min read Level 2/5 #vue#router#params
What you'll learn
  • Read params from useRoute().params
  • Read query from useRoute().query
  • Navigate programmatically with useRouter

useRoute() exposes the active route — params, query, hash, path. useRouter() exposes the router instance for programmatic navigation. Both are reactive.

Reading Params

For a route like /users/:id, route.params.id gives you the value as a string.

<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
const userId = route.params.id as string
</script>

<template>
  <h1>User {{ userId }}</h1>
</template>

Reading Query

Query strings live on route.query.

// URL: /list?page=2&sort=name
const route = useRoute()
const page = Number(route.query.page ?? 1)
const sort = String(route.query.sort ?? 'id')

Programmatic Navigation

useRouter() gives you the router instance — push, replace, back, and forward.

import { useRouter } from 'vue-router'
const router = useRouter()

router.push('/about')
router.push({ name: 'user', params: { id: 42 } })
router.push({ path: '/list', query: { page: 2 } })
router.replace('/login') // no history entry

Reacting to Param Changes

A component is reused when only the param changes. Use a watcher to refetch.

import { watch } from 'vue'
watch(
  () => route.params.id,
  (id) => fetchUser(id as string),
  { immediate: true },
)
Navigation Guards →