docs(getting-started): add routing page

docs/content/1.getting-started/5.routing.md

@@ -0,0 +1,82 @@
+# 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.
+
+## Pages
+
+Nuxt routing is based on Vue-router. Under the hood, Nuxt generates the vue-router configuration file with every components created in the pages directory, based on their file name.
+
+This file system routing uses naming conventions to create dynamic and nested routes:
+
+::code-group
+
+```text [pages/ directory]
+pages/
+--| about.vue
+--| posts/
+----| [id].vue
+```
+
+```js [Generated Router file]
+{
+  "routes": [
+    {
+      "path": "/about",
+      "component": "pages/about.vue"
+    },
+    {
+      "path": "/posts/:id",
+      "component": "pages/posts/[id].vue"
+    }
+  ]
+}
+```
+
+::
+
+## 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.
+
+```vue [pages/app.vue]
+<template>
+  <header>
+    <nav>
+      <ul>
+        <li><NuxtLink to="/about">About</NuxtLink></li>
+        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
+        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
+      </ul>
+    </nav>
+  </header>
+</template>
+```
+
+:ReadMore{link="/api/components/nuxt-link"}
+
+## Route Parameters
+
+The `useRoute()` composable can be used in a `<script setup>` block or a `setup()` method of a Vue component to access the current route details.
+
+```vue [pages/post/[id].vue]
+<script setup>
+const route = useRoute()
+
+// When accessing /posts/1, route.params.id will be 1
+console.log(route.params.id)
+</script>
+```
+
+## Route Middleware
+
+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.
+::
+
+There are three kinds of route middleware:
+
+1. Anonymous (or inline) route middleware, which are defined directly in the pages where they are used.
+2. Named route middleware, which are placed in the `middleware/` directory and will be automatically loaded via asynchronous import when used on a page. (**Note**: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.)
+3. Global route middleware, which are placed in the `middleware/` directory (with a `.global` suffix) and will be automatically run on every route change.

docs/content/1.getting-started/index.md

@@ -1,7 +1,6 @@
 ---
 title: Get Started
 layout.aside: true
-layout.asideClass: ''
 navigation.exclusive: true
 navigation.redirect: /getting-started/introduction
 ---