Vue) 16. url에 파라미터를 주어 동적 url을 만들어보자..

url에 파라미터 주는 법 )

앞의 글에서는 없지만 간단하게 말하자면, 게시글 리스트 페이지에서 해당하는 게시글로의 이동은 url을 활용한다.

게시글 리스트 페이지 url

http://localhost:8080/list

첫번째 게시글 상세 페이지

http://localhost:8080/list/0

뒤에 숫자로 게시글을 찾아간다고 생각하면 되는데, router.js에서 const routes 부분에 url을 살짝만 수정해주면 준비는 끝난 것이다.

router.js

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

:id 하나만 붙여준다면 url에 파라미터를 줄 수 있게된다.

같은 디테일 페이지지만, 앞서 url의 게시글 번호로 달라지듯이 동적인 데이터를 보여주는 url을 만들 수 있다.

활용 )

List.vue에서 detail.vue로 페이지를 이동시키는 <router-link> 를 이용하여 구현해 보았다.

blogData.js (글 목록 데이터)

export default [
  {
    title: "첫 째 프로젝트 : 허위매물 전문 부동산 앱",
    content: "Vue를 이용하면 비누같이 매끈한 앱을 만들 수 있습니다",
    date: "September 24, 2021",
    number: 0,
  },
  {
    title: "둘 째 프로젝트 : 오마카세 배달 앱",
    content: "음식이 아니라 셰프를 직접 배달해드립니다",
    date: "October 20, 2020",
    number: 1,
  },
  {
    title: "셋 째 프로젝트 : 현피 앱",
    content:
      "거리를 설정하면 가장 가까운 파이터를 소개해드려요! 서로 싸워보세요",
    date: "April 24, 2019",
    number: 2,
  },
];

List.vue (template)

<template>
  <div class="listWrapper">
    <div v-for="(el, index) in blogData" :key="index" class="list">
      <!-- 페이지 이동 라우터 -->
      <router-link :to="'/detail/' + el.number">{{ el.title }}</router-link>
      <p>{{ el.date }}</p>
    </div>
  </div>
  <router-view :el="el"></router-view>
</template>

간략하게 설명을 하자면, 우선 list.vue는 글목록 데이터를 가지고 있는 객체 배열을 v-for 로 만든 리스트 페이지이다.

글목록 데이터에는 글번호 number라는 데이터가 존재하는데, 이것을 이용했다.

각각의 요소에 접하는 el.number로 url에 파라미터를 주어 상세 페이지로 이동을 시키는 로직을 짯다.
(생각해보면 index 값으로 파라미터를 줘도 상관없을거 같다 ㅋㅋ)

<router-view> 로 보여 줄 상세글은 하나의 글 정보를 가진 el 을 props 로 Detail.vue에 데이터를 보내주었다.

Detail.vue (전체 코드)

<template>
  <div class="detailWrapper">
    <div class="detail">
      <h4 class="menuTitle">상세 페이지</h4>
      <h5>{{ blogData[$route.params.id].title }}</h5>
      <p>{{ blogData[$route.params.id].content }}</p>
    </div>
  </div>
  <router-view></router-view>
</template>

<script>
export default {
  name: "DetailView",
  props: {
    blogData: Array,
  },
};
</script>

<style>
.detailWrapper {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
}

.detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  width: 100%;
}

.menuTitle {
  margin-bottom: 50px;
}
</style>

리스트 페이지에서 디테일 페이지로 이동을하면 보여지는 Detail.vue페이지다.

아마 url을 보면 해당하는 게시물을 클릭하고 el.number가 뒤에 붙어있는 페이지의 url일 것이다.

• ex ) http://localhost:8080/list/[el.number]

🤔 그렇다면 여러개의 글 중에서 내가 클릭한 글의 정보의 데이터를 불러와서 보여줄 수 있을까??

.. 다같이 생각해보자

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

바로 정답은 url 에 존재한다!!

글 데이터에는 각각의 number가 존재 했고, 우리는 그 number 를 url 에 파라미터로 줬었다.

해당하는 number는 글 데이터의 index 와 같기 때문에 url 에 있는 파라미터를 가져와서 index 로 주면 되는데 이녀석을 어떻게 가져오냐면..

<h5>{{ blogData[$route.params.id].title }}</h5>

바로 $route.params.id 이것이 url에 있는 파라미터를 가져올 수 있게 만들어준다!!

배열에 해당하는 index 값을 알기 때문에 우리는 상세 글 페이지를 구현해 보여줄 수 있게 된다.

결과 )