#14 simple blog : front - read view

simpleblog/front/src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import WriteView from "../views/WriteView.vue";
+import ReadView from "../views/ReadView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -14,6 +15,12 @@ const router = createRouter({
       path: "/write",
       name: "write",
       component: WriteView,
+    },
+    {
+      path: "/read/:postId",
+      name: "read",
+      component: ReadView,
+      props: true,
     }
     // {
     //   path: "/about",

simpleblog/front/src/views/HomeView.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import axios from "axios";
 import {ref} from "vue";
+import {useRouter} from "vue-router";
+
+const router = useRouter();
 
 const posts = ref([]);
 
@@ -15,7 +18,9 @@ axios.get("/api/posts?page=1&size=5", ).then((response) => {
   <ul>
     <li v-for="post in posts" :key="post.id">
       <div>
-        {{ post.title }}
+        <router-link :to="{ name: 'read', params: { postId: post.id }}">
+          {{ post.title }}
+        </router-link>
       </div>
 
       <div>

simpleblog/front/src/views/ReadView.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {onMounted, ref} from "vue";
+import axios from "axios";
+
+const props = defineProps({
+  postId: {
+    type: [Number, String],
+    require: true,
+  },
+});
+
+const post = ref({
+  id: 0,
+  title: "",
+  content: "",
+});
+
+onMounted(() => {
+  axios.get(`/api/posts/${props.postId}`).then((response) => {
+    post.value = response.data;
+  });
+});
+
+</script>
+
+<template>
+  <h2>{{ post.title }}</h2>
+  <div>{{ post.content }}</div>
+</template>