feat: content/2.concepts/3.routing

Author: ubugeeei

content/2.concepts/3.routing/index.md

@@ -2,6 +2,38 @@
 ogImage: true
 ---
 
-# Routing
+# ルーティング
 
-[Back to index](/)
+## ファイルシステムルーター
+
+Nuxtの主要機能の一つはファイルシステムルーターです。`pages/` ディレクトリ内の各 Vue ファイルが、それに対応する URL（またはルート）を作成し、そのファイルの内容を表示します。\
+この例では、`pages/index.vue` が `/` に、`pages/foo.vue` が `/foo` に対応しています。\
+このルーティングは [vue-router](https://router.vuejs.org/) をベースに実装されています。
+
+また、Nuxt は各ページに対して動的インポートを使用することでコード分割を活用し、リクエストされたルートに対して最小限の JavaScript を配信します。
+
+## ナビゲーション
+
+`pages/` にルートを作成したら、`<NuxtLink>` コンポーネントまたは `navigateTo` 関数を使ってナビゲーションを行うことができます。
+
+`<NuxtLink>` コンポーネントでは `to` という props にルートを指定することでリンクを作成することができます。\
+`<NuxtLink>` コンポーネントは自動的に最適化されるため、通常の `<a>` 要素と、`href` 属性を利用したリンクの作成と比べ、高速にナビゲーションを行うことができます。
+
+## ルートパラメーター
+
+`/pages` ディレクトリでは、ファイル名の一部を `[]` で囲うことで動的なルーティングを定義することができます。(例: `pages/posts/[id].vue`)
+
+この `[]` で囲われたルートパラメータは `useRoute()` を通じてアクセスすることができます。
+
+```vue
+<!-- pages/posts/[id].vue -->
+<script setup lang="ts">
+const route = useRoute()
+
+// /posts/1 にアクセスした際、route.params.id は 1 になる
+console.log(route.params.id)
+</script>
+```
+
+ここで登場した、`useRoute` 関数や `<NuxtLink>` コンポーネントは Nuxt のコアコンセプトの一つである Auto Imports によって自動的に import されるため、import 文を記載することなく利用することができます。\
+Auto Import について次のセクションでより詳しく学びましょう。