Merge pull request #10 from KensukeOta/記事詳細表示機能

記事詳細表示機能を実装しました

src/components/organisms/PostItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Post } from "@/types/Post";
+import { RouterLink } from "vue-router";
 
 defineProps<{
   post: Post;
@@ -8,7 +9,9 @@ defineProps<{
 
 <template>
   <li class="border">
-    <h1 class="font-bold">{{ post.title }}</h1>
+    <RouterLink :to="`/posts/${post.id}`">
+      <h1 class="font-bold">{{ post.title }}</h1>
+    </RouterLink>
     <nav>
       <p>by {{ post.user.name }}</p>
     </nav>

src/router/index.ts

@@ -3,6 +3,7 @@ import HomeView from "@/views/HomeView.vue";
 import SignupView from "@/views/SignupView.vue";
 import LoginView from "@/views/LoginView.vue";
 import PostFormView from "@/views/PostFormView.vue";
+import PostContentView from "@/views/PostContentView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -27,6 +28,11 @@ const router = createRouter({
       name: "posts_create",
       component: PostFormView,
     },
+    {
+      path: "/posts/:id",
+      name: "post_content",
+      component: PostContentView,
+    },
   ],
 });
 

src/views/PostContentView.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { Post } from '@/types/Post';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { axios } from '@/lib/axios';
+
+const post = ref<Post>();
+
+const route = useRoute();
+
+onMounted(async () => {
+  const res = await axios.get(`${import.meta.env.VITE_API_URL}/api/posts/${route.params.id}`);
+  post.value = res.data;
+});
+</script>
+
+<template>
+  <h1 class="font-bold">{{ post?.title }}</h1>
+  <p>{{ post?.body }}</p>
+</template>