blog20 : 글 내용 화면 만들기

1. 글 내용 표시할 화면 파일 만들기 (ReadView.vue)

ReadView.vue생

<!--ReadView.vue-->
<script setup lang="ts">

</script>
<template>
  <h2>제목</h2>
  <div>내용</div>
</template>

 

2. 라우터에 해당 컴포넌트 등록 (index.ts)

// index.ts
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import WriteView from "../views/WriteView.vue"
import ReadView from "../views/ReadView.vue"; //경로를 적어줌으로써 import 필요

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/", //루트 경로라면
      name: "home", //home 뷰를 불러온다.
      component: HomeView,
    },
    {
      path: "/write",
      name: "write",
      component : WriteView //import가 필요하다.
    },
    {
      path: "/read",
      name: "read",
      component: ReadView
    }
  ],
});

export default router;

브라우저에 경로를 넣어주면 페이지에 진입하는 것을 볼 수 있다.

 

3. 글 리스트에서 클릭했을 때 내용 보여주기

<a href="">를 새요해도 되긴 하지만 그렇게 하면 application 전체를 다시 불러오기 때문에 resource낭비가 심하다.

따라서 <router-link>를 사용한다.

 

먼저 router-link를 사용 테스트

<!--HomeView.vue-->
<script setup lang="ts">
import axios from "axios";
import {ref} from "vue";
import {useRouter} from "vue-router";

const router = useRouter();

// const posts = [] 반응형 데이터가 아니면 안나옴
const posts = ref([])

//페이지, 사이즈도 넘겨야 함
axios.get("/api/posts?page=1&size=5").then((response) => {
  // console.log(response)
  response.data.forEach((r : any) => {
    // posts.push(r) 반응형 데이터는 value로 접근해야 함
    posts.value.push(r)
  });
});

//내용보기용 함수
const moveToRead = () => {
  router.push({name: "read"}); //라우터에 name이 read인 것을 push
}
</script>

<template>
  <ul>
    <!-- 반복문 사용 vue2.2.0이상부터는 v-for에 key 사용 필수-->
    <li v-for="post in posts" :key="post.id">
      <div>
        <router-link to="/read">{{post.title}}</router-link> <!-- 라우터 링크를 사용해서 해당 리소스만 가져옴.-->
      </div>

      <div>
        {{post.content}}
      </div>
    </li>
  </ul>
</template>

<style scoped>
li {
  margin-bottom: 1rem;
}

li:last-child{
  margin-bottom: 0;
}
</style>

누르면 ReadView.vue를 가져온다.

4. 파라미터 같이 넘겨주기

 

<!--HomeView.vue-->
<script setup lang="ts">
import axios from "axios";
import {ref} from "vue";
import {useRouter} from "vue-router";

const router = useRouter();

// const posts = [] 반응형 데이터가 아니면 안나옴
const posts = ref([])

//페이지, 사이즈도 넘겨야 함
axios.get("/api/posts?page=1&size=5").then((response) => {
  // console.log(response)
  response.data.forEach((r : any) => {
    // posts.push(r) 반응형 데이터는 value로 접근해야 함
    posts.value.push(r)
  });
});

//내용보기용 함수
const moveToRead = () => {
  router.push({name: "read"}); //라우터에 name이 read인 것을 push
}
</script>

<template>
  <ul>
    <!-- 반복문 사용 vue2.2.0이상부터는 v-for에 key 사용 필수-->
    <li v-for="post in posts" :key="post.id">
      <div>
        <!-- 라우터 링크를 사용해서 해당 리소스만 가져옴. 요청 시 파라미터도 함께 넘김-->
        <!--반드시  :to 를 써줘야 함. -->
        <router-link :to="{name: 'read', params: {postId: post.id}}"> {{post.title}}</router-link>
      </div>

      <div>
        {{post.content}}
      </div>
    </li>
  </ul>
</template>

<style scoped>
li {
  margin-bottom: 1rem;
}

li:last-child{
  margin-bottom: 0;
}
</style>

 

read 컴포넌트에서 파라미터를 함께 받을 수 있도록 라우터(index.ts에 파리미터 넣어주기)

// index.ts
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import WriteView from "../views/WriteView.vue"
import ReadView from "../views/ReadView.vue"; //경로를 적어줌으로써 import 필요

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/", //루트 경로라면
      name: "home", //home 뷰를 불러온다.
      component: HomeView,
    },
    {
      path: "/write",
      name: "write",
      component : WriteView //import가 필요하다.
    },
    {
      // path: "/read",
      path: "/read/:postId", //파라미터를 받을 수 있도록 설정 ######
      name: "read",
      component: ReadView,
      props: true, //해당 변수는 ReadView 컴포넌트에서 받을 수 있게 하겠다
    }
  ],
});

export default router;

파라미터와 함께 넘어간다.

 

 

5. 넘긴 파라미터 axios로 서버에 보내서 글 정보 가져오기

<!--ReadView.vue-->
<script setup lang="ts">

// 추가
import {defineProps, onMounted, ref} from "vue"
import axios from "axios";

const props = defineProps({
  postId: {
    type: [Number, String], //url로 파라미터가 넘어가기 때문에 String값으로 받음. 따라서 둘다 받을 수 있도록 처리
    require: true,
  }
})

const post = ref({
  id: 0,
  title: "",
  content: "",
});

onMounted(() => {
  //console.log(props.postId) 파라미터가 잘 넘어가는 걸 확인했음.
  axios.get(`/api/posts/${props.postId}`)
      .then((response) => {
        post.value = response.data;
  });
});
// \추가


</script>
<template>
  <h2>{{post.title}}</h2>
  <div>{{post.content}}</div>
</template>

누르기

 

현재 초기화 코드라든지, 서버에 파라미터를 넘겨 값을 받아오는 방식에도 문제가 있다.

추후 코드는 개선한다.