Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

docs: update for clarity and fix typos #8375

Merged
merged 2 commits into from Oct 21, 2022
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/content/1.getting-started/5.routing.md
Expand Up @@ -4,7 +4,7 @@ description: Nuxt file-system routing creates a route for every file in the page
---
# Routing

One of Nuxt core feature is the file-system router. Every Vue file created inside the pages/ directory creates a corresponding URL (or route) that displays the content of the file. Nuxt leverages code-splitting on each page by using dynamic imports to ship the minimum of JavaScript for the requested route.
One core feature of Nuxt is the file system router. Every Vue file inside the pages/ directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route.
danielroe marked this conversation as resolved.
Show resolved Hide resolved

## Pages

Expand Down Expand Up @@ -40,7 +40,7 @@ pages/

## Navigation

The `<NuxtLink>` component links pages between them. It renders a `<a>` tag with the `href` attribute set to the route of the page. Once the application is hydrated, pages transitions are performed in JavaScript by updating the browser URL. This prevents full-page refreshes and allow for animated transitions.
The `<NuxtLink>` component links pages between them. It renders an `<a>` tag with the `href` attribute set to the route of the page. Once the application is hydrated, page transitions are performed in JavaScript by updating the browser URL. This prevents full-page refreshes and allows for animated transitions.

When a `<NuxtLink>` enters the viewport on the client side, Nuxt will automatically prefetch components and payload (generated pages) of the linked pages ahead of time, resulting in faster navigation.

Expand Down Expand Up @@ -80,7 +80,7 @@ console.log(route.params.id)
Nuxt provides a customizable route middleware framework you can use throughout your application, ideal for extracting code that you want to run before navigating to a particular route.

::alert{type=info}
Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from server middleware, which are run in the Nitro server part of your app.
Route middleware runs within the Vue part of your Nuxt app. Despite the similar name, they are completely different from server middleware, which are run in the Nitro server part of your app.
::

There are three kinds of route middleware:
Expand Down Expand Up @@ -122,7 +122,7 @@ definePageMeta({

Nuxt offers route validation via the `validate` property in [`definePageMeta`](/api/utils/define-page-meta) in each page you wish to validate.

The `validate` property accepts the `route` as an argument. You can return a boolean value to determine whether or not this is a valid route to be rendered with this page. If you return false and another match can't be found, this will mean a 404. You can also directly return an object with `statusCode`/`statusMessage` to respond immediately with an error (other matches will not be checked).
The `validate` property accepts the `route` as an argument. You can return a boolean value to determine whether or not this is a valid route to be rendered with this page. If you return `false`, and another match can't be found, this will cause a 404 error. You can also directly return an object with `statusCode`/`statusMessage` to respond immediately with an error (other matches will not be checked).

If you have a more complex use case, then you can use anonymous route middleware instead.

Expand Down