이번엔 이전에 만든 모달창 형식을 실제 블로그처럼 하나하나의 주소를 가진 게시물로 만들어 볼 것입니다.
라우터 사용방법 복습 겸 추가 기능 익히기라고 보면 되겠습니다.
모달창은 잠시 주석으로 제거해놓고 라우터 방식으로 변경합니다.
1. 세팅하기
라우터를 사용할수 있도록 세팅을 할 것인데, 라우터를 전혀 모른다면 이전 게시물을 우선 참고해 보는것이 좋습니다.
Vue 페이지 전환하기 (라우터 설치부터 사용까지) >
세팅 순서 : router설치 > main.js에 등록 > router경로 설정
(main.js)
import router from './router'
createApp(App).use(router).mount('#app')(/router/index.js)
import { createRouter, createWebHistory } from 'vue-router'
import ModalPopup from '../components/ModalPopup.vue'
const routes = [
{
path: '/post',
name: 'ModalPopup',
component: ModalPopup
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router누군가가 /post로 입력하면 모달창으로 만들어놨던 컴포넌트를 보여줄 예정입니다.
이제 app.vue로 돌아와 모달창형식으로 만들어 놓았던 컴포넌트관련 내용은 사용하지 않을거니 모두 주석처리로 제거해 줍니다.
(1) <ModalPopup @ModalClose="ModalClose" :post="post" :selectPost="selectPost" v-if="ModalPopup" />
(2) import ModalPopup from './components/ModalPopup.vue'
(3) ModalPopup // <-- components에 등록한 것
새롭게 진행할 것이니 기존 app.vue와 모달창 형식도 작성되었던 내용도 모달 관련 내용들은 모두 제거하고 기본형으로 만들어 봅시다.
(app.vue)
<div v-for="(item, index) in post" :key="index" class="blogPost">
<p>제목: {{ item.title }}</p>
<p>작성일: {{ item.date }}</p>
</div>
<router-view />(modalPopup.vue)
<template>
<h2>제목: </h2>
<p>작성일: </p>
<p>내용: </p>
</template>이제 팝업창이 아니니 닫기버튼은 삭제해도 됩니다.
2. 게시물마다 번호 주는 방법
이제 구현할려고 하는것은
게시물마다 번호를 구분하여 각각의 주소를 갖게되지만 보여주는 컴포넌트는
모두 ModalPopup페이지의 디자인을 재활용 하여 안의 내용물만 해당 게시물에 맞는 내용물로 바꿔줄 것입니다.
(1) 라우터 설정
(router/index.js)
const routes = [
{
path: '/post/:id', // <-- id대신 user, name등 이름은 원하는대로 작명가능
name: 'ModalPopup',
component: ModalPopup
},
]위와같이 설정하면 포스트 하위로 어떤 주소가 나오더라도 ModalPopup이라는 컴포넌트를 보여주게 됩니다.
(2) 링크 페이지 설정
(app.vue)
<div v-for="(item, index) in post" :key="index" class="blogPost">
<p @click="$router.push(`/post/${index}`)">제목: {{ item.title }}</p>
<p>작성일: {{ item.date }}</p>
</div>이전 라우터 설명에선 링크 방식을 이용했으니, 이번엔 자바스크립트 코드 방식을 이용해서 연결해보겠습니다.
@click="$router.push()"클릭하면 해당 라우터 주소로 연결시켜주라는 내용입니다.
반복문이 걸려있으니 게시물의 번호(index)가 추가되도록 작성한것인데, 이 부분또한 페이지 타입에 따라 로그인한 유저에 따른 유저 정보 페이지 (about/${user}) 등이 될수도 있습니다.
이제 게시물의 제목을 클릭해보면 게시물마다 주소창이 바뀌는것을 확인할 수 있습니다.
(3) props 전송하기
이제 라우터에 데이터를 넘겨줍니다. 프롭스도 지난번에 했으니 프롭스 전달하는 방법은 생략.
(app.vue)
<router-view :post="post"/>
(4) 프롭스 전달이 완료되었다면 {{ post }} 를 입력해서 내용이 잘 전달되고 있는지 확인해 봅니다.
이제 게시물 번호를 가져와서 해당 내용만 출력하면 되는데, 예전처럼 인덱스 번호를 가져올만한 함수를 만들지 않더라도 라우터를 사용할 땐 조금 더 쉽게 구현할 수 있습니다.
(ModalPopup.vue)
<template>
<div class="popup">
<h2 class="popupTitle">제목: {{ post[$route.params.id].title }}</h2>
<p class="popupDate">작성일: {{ post[$route.params.id].date }}</p>
<p class="popupContents">내용: {{ post[$route.params.id].contents }}</p>
</div>
</template>{{ $route.parmas.작명한 파라미터명 }} 형식으로 작성하면 동일한 이름의 파라미터 자리에 기입된 내용을 표시해 줍니다.
쓸데없는 내용
지난번 부터 의식의 흐름대로 글을 쭉 이어오다보니 게시물이 모달창처럼 되어있어 이전 화면으로 돌아갈 수가 없는데,
이정도 따라오셨으면 어지간한건 원하는대로 대부분 다 구현 가능할것입니다.
대충 라우터와 모달창에 아래와 같은형식으로 추가하면 닫기를 누르면 홈으로 돌아갈테니 모달창(원래는 게시물 용도지만...)이 사라지겠네요.
(router/index.js)
{
path: '/',
},(ModalPopup.vue)
<button @click="$router.push('/')" class="closeButton">닫기</button>추가로 라우터는 위에 작성된 파라미터 방식 외에도 쿼리방식으로 하는 경우도 있습니다.
또한 router와 route 햇갈리니 주의하시기 바랍니다.
< Router는 전체적인 기능을 관리, route는 각 라우트의 상태를 저장한 객체 >
교훈: 처음부터 기획과 디자인을 잘하자.