레이아웃 컴포넌트와 그리드 컴포넌트 활용

• Layout.vue: 레이아웃 컴포넌트로 사용되며, 헤더와 메인 영역을 포함합니다.
• Grid.vue: 그리드 레이아웃을 정의하는 컴포넌트입니다. 이를 통해 게시물을 그리드 형식으로 나열할 수 있습니다.

<template>
  <layout>
    <template #header>
      <h1>My Blog</h1>
    </template>
    <main>
      <div class="posts-container">
        <Grid :cols="2">
          <Post v-for="post in posts" :key="post.id" :title="post.title" :content="post.content" />
        </Grid>
      </div>
    </main>
  </layout>
</template>

<script>
import Layout from './components/Layout.vue';
import Grid from './components/Grid.vue';
import Post from './components/Post.vue';
import { data } from './data'; // 게시물 데이터

export default {
  components: {
    Layout,
    Grid,
    Post,
  },
  data() {
    return {
      posts: data,
    };
  },
};
</script>

<style scoped>
.posts-container {
  padding: 20px;
}
</style>

 

 

게시물 상세 페이지:

• 각 게시물을 클릭하면 해당 게시물의 상세 페이지로 이동합니다.
• 상세 페이지에서는 게시물의 제목, 내용, 작성자, 작성일 등을 표시합니다.
• Vue Router의 동적 라우팅을 사용하여 :id 매개변수를 통해 특정 게시물의 상세 정보를 불러옵니다.
• v-for 지시문을 사용하여 게시물 배열을 반복하고 각 게시물에 대한 PostDetail 컴포넌트를 렌더링합니다.
• router-link 지시문을 사용하여 게시물 제목을 클릭하면 게시물 상세 페이지로 이동하도록 합니다.

라우팅:

• 라우팅 설정은 router.js 파일에서 이루어집니다.
• /post/:id 경로는 PostDetail 컴포넌트를 나타내며, 동적 라우트 매개변수를 사용하여 특정 게시물의 ID를 전달합니다.
• / 경로는 Home 컴포넌트를 나타냅니다.
• /about 경로는 About 컴포넌트를 나타냅니다.
• /contact 경로는 Contact 컴포넌트를 나타냅니다.