Route parameters with useRoute in Vue

Introduction

Route parameters let you get values from the URL.
useRoute helps you read these values inside your Vue component easily.

You want to show details of a user based on their ID in the URL.

You need to get a product code from the URL to display product info.

You want to read a category name from the URL to filter a list.

You want to react to changes in the URL parameters without reloading the page.

Syntax

Vue

import { useRoute } from 'vue-router'

const route = useRoute()
const paramValue = route.params.paramName

useRoute is a function from vue-router to access current route info.

Route parameters are accessed via route.params object.

Examples

Get the id parameter from the URL, like /user/123.

Vue

const route = useRoute()
const userId = route.params.id

Read a category parameter from the URL, e.g. /shop/electronics.

Vue

const route = useRoute()
const category = route.params.category

Get a slug parameter or use a default if missing.

Vue

const route = useRoute()
const slug = route.params.slug || 'default-slug'

Sample Program

This component shows the user ID from the URL parameter id. If the URL is /user/42, it displays 42. It updates automatically if the URL changes.

Vue

<template>
  <main>
    <h1>User Profile</h1>
    <p>User ID from URL: {{ userId }}</p>
  </main>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()
const userId = computed(() => route.params.id || 'No ID')
</script>

Important Notes

Route parameters come from the route path like /user/:id.

useRoute returns a reactive object, so use computed to react to changes.

If the parameter is missing, handle it gracefully to avoid errors.

Summary

useRoute lets you read URL parameters inside Vue components.

Access parameters with route.params.paramName.

Use computed to react to parameter changes.