In Vue Router 5, how does a route record with path '/products/:id' match URLs, and how does a script setup component read the id?
answer
- colon marks a param
- one segment, no slash
- case and trailing slash forgiven
- useRoute().params, decoded strings
- query lives elsewhere
basics
~10 sThe :id segment matches exactly one non-empty path segment, so /products/42 matches and /products/42/reviews does not; a component reads it as useRoute().params.id, a decoded string.
solid answer
~40 sA colon turns a segment into a **param**: `/products/:id` matches `/products/42` and `/products/blue-kettle`, but not `/products` (the param is required) or `/products/42/reviews` (a plain param never spans a `/`). By default matching is case-insensitive and tolerates a trailing slash, so `/Products/42/` also matches. In `<script setup>`, `const route = useRoute()` gives a reactive route object; `route.params.id` is the value, always a decoded **string**, typed `string | string[]` on an untyped router because repeatable params produce arrays. In templates `$route.params.id` works too. Query and hash are separate: `/products/42?tab=specs` puts `tab` in `route.query`, not in `params`. Several params can share one path, like `/shops/:shopId/products/:id`.
code
vue · 14 lines<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
// '42' for /products/42 (a string, decoded)
const productId = computed(() => String(route.params.id))
const tab = computed(() => route.query.tab ?? 'overview')
</script>
<template>
<h1>Product {{ productId }}</h1>
<p>Tab: {{ tab }}</p>
</template>go deeper
Know the colon syntax, that a plain param matches one segment, and that useRoute().params.id gives a string.
Explain decoding, the string | string[] typing, the case and trailing-slash defaults, and why named pushes need required params.
Spot typos like /products:id, keep conversion out of components with props functions, and prefer typed routes in a large table.
Set conventions for param naming and typing across a large route table so URL changes cannot silently break links.
## Declaring a dynamic segment In Vue Router 5 a route record's `path` is a small pattern language. A segment that starts with a colon is a **param**: ```ts const routes = [ { path: '/products/:id', name: 'product', component: ProductPage }, ] ``` One record now serves every product page. The name after the colon, `id`, becomes the key in `route.params`. A path can hold several params, for example `/shops/:shopId/products/:id`, and each one becomes its own key. ## What the default param matches - **Exactly one segment.** The default param pattern matches one or more characters that are not `/`. `/products/42` matches; `/products/42/reviews` does not, because that would need the param to swallow a slash. - **Required.** `/products` alone does not match; the segment must be present and non-empty. Optional params use a `?` modifier, which is a separate topic. - **Case-insensitive.** The router's `sensitive` option defaults to `false`, so `/PRODUCTS/42` matches too. - **Trailing slash tolerated.** The `strict` option defaults to `false`, so `/products/42/` matches the same record. When the default is too loose, for example when `/products/new` and `/products/:id` both exist, the router ranks candidates instead of trying them in array order. That ranking, custom regular expressions in params and the `strict` and `sensitive` switches are the deeper half of this subject. ## Reading the param in a component With the Composition API, `useRoute()` returns the current route location. It is reactive, so reading from it inside a `computed`, a `watch` source or the template tracks changes. | Where | How to read it | |---|---| | `<script setup>` | `const route = useRoute()` then `route.params.id` | | Template | `$route.params.id` or `route.params.id` | | Options API | `this.$route.params.id` | | Route record | `props: true` passes it as a prop instead | A few properties of the value matter in interviews: 1. It is a **string**. `route.params.id === 42` is always false; convert with `Number()` where a number is needed. 2. It is **decoded**. A URL segment `blue%20kettle` arrives as `blue kettle`, and a `/` inside a param travels in the URL as `%2F` but reads back as `/`. 3. On a router without typed routes, `route.params` is typed as a record of `string | string[]`, because a **repeatable** param yields an array. Code that assumes a string needs a narrowing check or a typed router. 4. It holds **only path params**. `?tab=specs` lands in `route.query`, `#reviews` in `route.hash`. ## Building URLs from params The same record works in reverse. `router.push({ name: 'product', params: { id: '42' } })` or `<RouterLink :to="{ name: 'product', params: { id: product.id } }">` produces `/products/42`, encoding the value for you. A named push without `id` reuses the current route's `id` when there is one; from a page without an `id` it throws, because the router cannot build a URL with a required param missing. Hand-built strings such as `` `/products/${id}` `` work, but you must encode the value yourself and they break silently when the path is renamed. ## Common slips - Declaring `/products:id` without the slash: that is a static prefix `products` followed by a param in the **same segment**, so it matches `/products42`, not `/products/42`. - Reading `route.params.id` once into a plain variable at setup time and expecting it to update; the value is reactive only while it is read through `route`. - Expecting `route.params` to include query values. - Comparing the id with `===` against a number. ## Edge cases the matcher reports - **Duplicate names.** `/shops/:id/products/:id` triggers a development warning, and only the last `id` survives in `route.params`; give each param its own name. - **Malformed encoding.** A segment with a broken percent-escape cannot be decoded; the router warns in development and keeps the raw text instead of throwing. - **Mixed segments.** Static text and a param can share a segment on purpose: `/file-:name` matches `/file-report` with `name` equal to `report`. - **No match.** A URL that matches no record leaves `route.matched` empty and renders nothing, with a development warning, unless the table has a catch-all route for a 404 page. ## A catalogue example For a catalogue with `/products/:id` and `/shops/:shopId/products/:id`, both records can use the same `ProductPage` component. It reads `route.params.id` in both cases, and `route.params.shopId` only exists on the second. Code that needs to know which record matched should check `route.name` rather than guess from the presence of a param.
- Why is route.params.id typed as string | string[] when the pattern has a single :id?On an untyped router, `route.params` has one generic type for every route, and some routes use repeatable params such as `:path+`, which produce arrays. TypeScript cannot know which record matched. Narrow the value, convert it in a `props` function, or use typed routes so each route name maps to its own param types.
- What does /products:id match, compared with /products/:id?Without the slash, `products` and `:id` sit in one segment: a static prefix followed by a param. It matches `/products42` and puts `42` in `id`, but not `/products/42`. Mixed segments like `/file-:name` are allowed on purpose; here it is almost always a typo.
saying these in an interview costs you the question
- route.params.id is a number when the URL segment is numeric.
- A plain :id param can match several segments like 42/reviews.
- Query string values show up in route.params.
- Route matching is case-sensitive by default.
- /products/42/ fails to match /products/:id because of the trailing slash.