Vue로 블로그 만들기 - 4.상세페이지 만들기

파라미터 문법

const routes = [
  {
    path: "/detail/:id",
    component: Detail,
  }
 ]

• /detail/뒤에 :id 가 파라미터이다.
• detail/에 id를 입력하면 id에 해당하는 상세페이지가 보여지게된다.
• 컴포넌트 안에서 URL 파라미터에 뭐가 써있는지 출력하고 싶으면 {{ $route.params.파라미터명 }} 을 작성한다.

물론 Detail.vue에서 작업 또한 해주어야 한다.

<template>
  {{ $route.params.id }} //id가 무엇인지 출력해보기
  <div>
    <h4>상세페이지</h4>
    <h5>{{ blogData[$route.params.id].title }}</h5> //id에 해당하는 제목
    <p>{{ blogData[$route.params.id].content }}</p> //id에 해당하는 컨텐츠
    
  </div>
</template>

Nested Routes

• 특정 페이지 내에서 또 라우트를 나누는 것
• 예를 들어 /detail/0/autor -> 페이지 내의 작가 소개란을 보여주고, /detail/0/comment ->  페이지 내의 댓글란을 보여주는 경우

const routes = [
  {
    path: "/detail/:id",
    component: Detail,
    children: [
      {
        path: "author", //상대경로
        component: Author.vue,
      },
      {
        path: "comment", //상대경로
        component: Comment.vue,
      },
    ],
  },
 ]

 

페이지 이동하기

• $router.push('경로') : 해당 경로로 이동. <router-link>대신 사용 가능하며, 변수를 집어넣을 수 있다.
• $router.go(-1): -1이면 한 페이지 뒤로 가기, -2이면 두 페이지 뒤로 가기, 1이면 한 페이지 앞으로 가기