`. Route transitions between pages need it, and an HTML comment at the top of the template counts as a second root. Keeping to one root from the start saves a confusing warning later. ## Dynamic segments with square brackets A file name in square brackets is a parameter: a part of the URL that can be anything. Create `pages/users/[id].vue` and it serves `/users/1`, `/users/42` and `/users/anything`. Inside the page, `useRoute()` gives you the current route, and `route.params.id` holds the value: *pages/users/\[id].vue* ``` ``` `useRoute` is auto-imported in Nuxt, like `ref` and `computed`. The `as string` is there because Vue Router types a param as `string | string[]`; a single bracket segment is always a string, so the cast is honest. In the template you can also read `$route.params.id` directly without the script. Brackets can be part of a name too. `pages/users/[id]-settings.vue` serves `/users/42-settings`, and a folder can be dynamic: `pages/[category]/[slug].vue` gives you two params from `/vue/reactivity`. ## Catch-all routes and a custom 404 page Three dots inside the brackets match the rest of the URL, however many segments it has. Create `pages/docs/[...slug].vue` and it serves `/docs/intro`, `/docs/guide/routing` and anything else under `/docs/`. This time the param is an array, one item per segment: *pages/docs/\[...slug].vue* ``` ``` A catch-all also matches its own folder: `/docs` reaches this page with `slug` set to an empty string, not an array. That is why the code checks `Array.isArray` before calling `join`, which a string does not have. On `/docs` itself, show an index or redirect rather than an empty heading. A catch-all at the top level, `pages/[...slug].vue`, matches every URL that no other page claims (`/about` still goes to `about.vue`), so it can be your custom 404 page. Nuxt sends it with status 200 like any other page, so set the status yourself: *pages/\[...slug].vue* ``` ``` `useRequestEvent()` returns the incoming request on the server and `undefined` in the browser, where there is no response status to set. ## Nested pages with NuxtPage Sometimes a group of pages shares a frame: a sidebar on every user page, or tabs on a settings screen. Nuxt expresses that with a file and a folder of the same name. The file is the parent, the folder holds the children, and the parent decides where the child appears with its own ``. ``` pages/ users.vue # parent, serves nothing on its own users/ index.vue # /users [id].vue # /users/42 ``` *pages/users.vue* ``` ``` When the URL is `/users/42`, Nuxt renders `users.vue` and, inside its ``, `users/[id].vue`. Navigating from one user to another re-renders only the child; the sidebar stays. Use nested pages when the parent is part of the URL. If you only want a shared frame around pages, with no shared URL prefix, a layout in `layouts/` is the better tool. ## Link to pages and navigate from code `` is how pages link to each other. It renders an ``, so the link works without JavaScript, and when the app is running it navigates on the client without a full reload. Use a plain path, or name the route and let Nuxt build the path: *components/UserRow.vue* ``` ``` Both links go to the same place. Route names are generated from the file path with hyphens, so `pages/users/[id].vue` is named `users-id`. With a name, Vue Router builds the URL and encodes the param, so a value containing a `/` still works. A name does not survive a move any better than a path: moving the file changes both. To highlight the current item in a navigation bar, style the classes `` adds: `router-link-exact-active` on a link to the current page, and `router-link-active` on that link and on links to its parent pages. Parent means nested: the "All users" link in `users.vue` stays active on `/users/42`, but a link to `/blog` is not active on `/blog/archive`, because no `blog.vue` wraps those pages. To navigate from code, after a form submits or a login succeeds, call `navigateTo()`: *pages/login.vue* ``` ``` `navigateTo` is auto-imported, works on the server and the client, and returns a promise, so `await` it. It is what you use instead of `useRouter().push()` in Nuxt. ## Reject invalid params before the page loads A dynamic segment accepts anything, including `/users/not-a-number`. Rather than letting the page render and fail while fetching, tell Nuxt what a valid param looks like. `definePageMeta()` is a compiler macro for page settings, and its `validate` option receives the route and returns `true` or `false`. Add this to the `

About

User {{ id }}

Docs: {{ path }}

Page not found