[Vue] options api로 웹사이트 만들기 - 8. 게시글 상세보기(1) (+ router 연결)

Router를 이용해서 게시글을 눌렀을 때 상세보기 창으로 라우팅해보겠습니다. 라우팅은 URL에 따라 보여줄 컴포넌트를 연결해놓고 , 해당 URL로 이동했을 때 연결된 컴포넌트를 보여주는 방법입니다.

Vue Router의 기본적인 태그는 다음과 같습니다 :

1. <router-link> :  이동할 URL 변경 태그
2. <router-view> : URL에 따라 연결된 component를 보여주는 부분

그럼 이제부터 vue-router를 사용해서 게시글 상세보기 창으로 이동하는 부분을 만들어보겠습니다!

1. vue-router 설치하기

우선 vue-router를 설치해줘야 하는데요, 그냥 npm install vue-router를 해보니,

저는 이런 에러 로그가 뜹니다!

ERESOLVE unable to resolve dependency tree ~ 어쩌구 ~ Fix the upstream dependency conflict, or retry

에러로그를 쭉 살표보니 해당 프로젝트는 vue2.x버전인데 vue-router@4.x 는 vue3.x 버전을 사용하기때문에 버전을 맞춰달라는 얘기입니다. . (현재 vue-router는 4버전까지 나온 상태로, 그냥 npm install vue-router를 할 경우 4버전이 설치됩니다) 해당 충돌을 해결하려면 --force나 --legacy-peer-deps 옵션을 붙여달라고도 하네요.

하지만 저는 vue2버전에 맞춰 vue-router3버전을 설치해주겠습니다

npm install vue-router@3

package.json에서 dependencies에 vue-router가 3버전으로 잘 설치된 것을 볼 수 있습니다. 

2. 코드수정

URL에 따라서 보여줄 컴포넌트를 바꾸는 라우팅 작업을 해야하기때문에 원래 App.vue 하나에서 이루어지던 것을 두 부분으로 나누어주겠습니다. /src 경로에 pages라는 폴더를 만들어서 그 안에 게시글과 유저리스트를 뿌려줄 Main.vue와 글 상세보기부분인 PostDetail.vue 를 만들어주었습니다.

상단 네비게이션바만 App.vue에 남기고 그 아래 메인 부분에서 콘텐츠를 뿌려주고 있는 부분을 <router-view>로 변경해줍니다. 그럼 URL에 따라서 바뀔 컴포넌트는 라우팅으로 렌더링되어 <router-view>안에 나타나게 됩니다.

App.vue

<v-container> 부분에 있던 코드는 pages/Main.vue 에 옮겨줍니다 (data에 links는 상단 네비게이션바 부분이므로 빼고 가져와야합니다)

Main.vue &amp;lt;template&amp;gt; 부분

Main.vue &amp;lt;script&amp;gt;부분

<script> 부분까지 상단네비게이션 data부분 빼고 싹 긁어왔습니다.

주의할 부분은 /src/App.vue에서 /src/pages/Main.vue로 경로가 바뀌었기 때문에 /src/components/Post.vue를 import 해오는 부분은 변경해주어야 합니다.

( 기존 import Post from './components/Post' 에서 import Post from '../components/Post' 로 변경 )

PostDetail.vue

우선 라우팅 확인용으로 PostDetail.vue는 이렇게 만들어주었습니다.

3. router.js 파일 만들어서 vue에 마운트시키기

router.js

(아까 router.js 에서 Main으로 받아온 컴포넌트 이름과 동일하게 만들어주어야 합니다)

이제 /src 하위에 router.js 라는 파일을 생성해줍니다. 이 파일에서 URL과 해당 URL에 맞는 컴포넌트를 이어주는 작업을 할겁니다.

router.js

vue-router를 import해와서 route에 배열의 형태로 path, component를 위와 같이 이어줍니다. 경로가 루트('/')인경우 /pages/Main.vue 컴포넌트를, 경로가 "/detail"인 경우 /pages/PostDetail.vue 컴포넌트를 <router-view>에 뿌려주게 됩니다.

main.js에서 router.js 를 받아와 Vue인스턴스에 마운트 시켜줍니다. 이러면 this.$axios를 사용할 때와 마찬가지로 this.$router를 통해 router를 사용할 수 있습니다.

router.js

그럼 URL로 /detail 이 들어왔을때 제대로 라우팅이 일어나는지 보겠습니다. 만들어두었던 /src/components/Post.vue 에서 글의 제목을 뿌려주는 부분을

Post.vue

<router-link>로 변경 후 to="detail"로 연결해줍니다. 그러면

<router-link>를 걸어둔 글의 제목이 <a>태그로 변경되어 그것을 클릭하면 URL이 /detail로 바뀌면서 아까 만들어둔 PostDetail.vue의 내용이 <router-view>에 나타나게 됩니다! <a>태그로 바뀌었다고 해서 <router-link>가 <a>태그와 동일한 것은 아닙니다. ( <a>는 페이지전체가 새로고침되지만 <router-link>는 <router-view>부분만 변경되기때문에 새로고침되지 않습니다. )

이번 글에서는 /detail 과 같이 URL이 고정되어있지만 다음글에서는 /detail/게시물id을 URL로 받을 경우 해당 게시물의 상세정보를 뿌려줘보도록 하겠습니다!