Vue nested routes 와 push 함수

저번에 router를 사용해서 /detail을 url에 추가하여 접속하면 상세 페이지까지 들어가는 것 까지 해보았다.

 

그리고 router에서 :url파라미터 형식을 사용하서 /detail/0, detail/1 로 접속하여서 상세페이지마다 다른 상세 정보를 보여주도록 해보았다.

 

오늘 정리하고자 하는 nested routes는 /detail/0/author로 접속하면 detail내에 작가 소개란을 보여주고 /detail/0/comment로 접속하면 댓글란을 보여주도록 하는 것을 가능하게 해주는 기능에 대해 정리해보려고 한다.

 

nested routes

특정 페이지 내에서 또 라우트를 나누는 경우를 말한다.

모달 창 방식으로 구현하는 방법이 있겠지만 이렇게 다른 URL로 구분 지으면 뒤로가기/ 앞으로가기 동작을 사용 가능하다.

 

router.js에서 nested routes 설정

const routes = [
  {
    path : '/detail/:id',
    component : Detail,
    children : [
      { path : 'author', component : Author }, // path는 상대 경로로 꼭 선언
      { path : 'comment', component : Comment },
    ]
  }
]

 

children이라는 항목을 개설하면 route들을 추가 가능한데 그러면 /detail/0/author에 대한 컴포넌트를 지정할 수 있다.

/detail/0 -> 까지는 Detail.vue를 보여줌 /author 까지 추가하여 접속하면 Author.vue를 보여준다.

 

그리고 Detail.vue로 부터 접속하는 것이라서 Detail.vue에 <router-view>태그를 추가해준다.

 

 

라우터 관련 개발 시 팁

라우터 관련 문법 에러들은 터미널에 뜨지 않고 개발자 도구 창에 뜬다.

(그리고 에러가 아니라 warning이라서 사이트가 멈추지는 않는다.)

그래서 에러나 경고를 없에고 싶으면 콘솔 창에서 확인하고 수정하자

 

페이지 이동을 하는 다른 방법 (push() 사용하기)

router를 사용하면 $router 객체를 사용할 수 있다

클릭을 하거나 했을 때 페이지를 이동하게 하고 싶으면

$router.push('/detail/0')

 

이런 코드를 활용하자

 

router-link대신 사용할 수 있고 변수도 집어넣을 수 있다.

 

 

$router.go(-1) 과 같은 것도  있는데 이는 뒤로 가기처럼 동작한다.

https://next.router.vuejs.org/ 다른 기능들도 엄청 많은데 필요할 때 찾아서 공부하고 사용하는 것이 좋을 것 같다.

위 사이트는 Vue 라우터 4버전 공식 사이트이다.

 

 

 

 

실습

리스트에서 제목을 눌렸을 때 상세 페이지인 (/detail)로 이동하고 싶다.

 

 

    <div>
        <h5>{{ blog[0].title }}</h5>
        <p>{{ blog[0].date }}</p>
    </div>
    <div>
        <h5>{{ blog[1].title }}</h5>
        <p>{{ blog[1].date }}</p>
    </div>
    <div>
        <h5>{{ blog[2].title }}</h5>
        <p>{{ blog[2].date }}</p>
    </div>

 

우선 이렇게 되어있는 코드들을 v-for를 사용하여 줄였다.

 

그리고 1번째 게시글 제목을 클릭했을 때는 첫번째 상세페이지, 두번째는 두번째 상세페이지로 이동해야하기 때문에 동적으로 경로 파라미터를 다르게 넣어줘야 했는데 push() 경로에 ``(백틱) 기호와 ${}를 사용해서 처리해주었다.

<template>
    <div v-for="(b, i) in blog" :key="i">
        <h5 @click="$router.push(`/detail/${i}`)">
            {{ b.title }}
        </h5>
        <p>{{ b.date }}</p>
    </div>
</template>

 

제목을 눌렸을 때 페이지가 잘 동작하는 것을 확인할 수 있었다.