[Vue] URL 파라미터 :id

 

1. 상세 페이지 생성

 

이번엔 detail 페이지 (상세 페이지)를 만들 것이다.

 

 

[ 페이지 생성 과정 ]

 

상세 페이지를 생성하기 위해 짧게 더미 데이터를 생성했다.

 

blog.js

 

  

    
    
    
    
  
export default[
    { 
      title : '첫번째 글',
      content : '야호 종강이다',
      date : '12 16, 2022',
      number : 0
    },{ 
      title : '두번째 글',
      content : '정신 차려보니 개강',
      date : '02 28, 2023',
      number : 1
    },{ 
      title : '세번째 글',
      content : '수강신청 변경 성공!',
      date : '03 04, 2023',
      number : 2
    }
  ]

 

 

 

Detail.vue

 

  

    
    
    
    
  
<template>
  <div>
    <h4>상세 페이지</h4>
    <h5>{{ blog[0].title }}</h5>
    <p>{{blog[0].date}}</p>
    <p>{{blog[0].content}}</p>
  </div>
</template>

<script>
export default {
    name: 'Detail',
    props : {
        blog: Array,
    }
}
</script>

<style>
</style>

 

상세 페이지는 우선은 이렇게 작성해 보았다. ( 밑에서 수정 과정을 확인할 수 있다. )

 

 

 

▼▼▼ 디테일 페이지 생성에 도움 되는 이전 글 참고하기

https://jinnycoding.tistory.com/31

[Vue] Vue-router 설치 및 사용법

 

 

 

 

이때 router는 어떻게 수정해야 할까?

 

 

물론 상세 페이지를 하나하나 만들 수는 있다.

 

 

 

router.js

 

  

    
    
    
    
  
import Detail from './components/Detail.vue';

const routes = [
  {
    path: '/detail/0',
    component: Detail,
  },
  {
    path: '/detail/1',
    component: Detail,
  },
  ~~ 반복반복 ~~
];

 

 

이런 식으로 하드코딩을 하는 게 맞을까??

 

당연히 아니다.

 

 

 

지금이야 데이터가 고작 3개라 가능하지만 나중에 데이터의 양이 많아지면 감당할 수 없을뿐더러,

용량도 많아지고 문제도 많아지고...

 

그렇게 하게 내버려 두지는 않을 것 같다   ಠ‸ಠ

 

 

이를 해결하기 위해선 어떻게 해야 할까?

 

 

 

 

URL 파라미터를 활용해 보자. ＿〆(。。)

 

 

 

 

 

 

 

2. 파라미터 문법

 

 

router.js

 

 

위 코드의 path를 보면 경로 뒤에 :id가 붙는다.

이를 파라미터라고 한다.

 

파라미터는 보통 콜론 ( : ) 을 붙여 작명한다.

( 물론 id 자리에는 원하는 대로 작명이 가능하다. )

 

 

:id 가 의미하는 바는

/ 뒤에다가 아무 문자나 작성하면 해당 컴포넌트(Detail)를 보여주세요~ 이다.

 

 

 

 

하지만 이 상태에서는

detail/0

detail/1

detail/545444

어떤 문자를 작성하든 모두 같은 페이지만 보여주게 될 것이다.

 

 

 

이번에는 이 현상을 해결해 보자.

 

 

 

 

 

 

3. {{ $route.params.파라미터명 }}

 

 

$route

• 라우트(url)에 담긴 모든 정보들을 꺼내다 쓸 수 있음 

 

params

• 파라미터를 모두 알려줌
• 파라미터는 연달아 작성할 수 있기 때문에 s를 붙임
• ( ex   " / detail / :id / :id2 " )

 

▶▶  $route.params => 파라미터 자리에 기입된 정보를 알려준다.

 

 

 

파라미터명은 router.js에서 : 뒤에 붙은 변수 이름과 같게 설정해 주면 된다.

 

 

 

 

이를 간단하게 확인해 보기 위해 상세 페이지를 바꿔보았다.

 

 

 

Detail.vue

 

  

    
    
    
    
  
<template>
  {{$route.params.id}}
</template>

<script>
export default {
    name: 'Detail',
}
</script>

<style>
</style>

 

 

 

이렇게 바꾼 뒤 url 뒤에 숫자를 바꾸면 입력받은 숫자를 화면에 띄워주는 것을 확인할 수 있다.

 

 

 

detail/1

detail/250

 

detail/20951510

 

잘 작동한다 b

 

 

 

이제 $route.params.id가 입력받은 데이터를 가져온다는 것을 알게 되었으니,

데이터바인딩 한 props의 인덱스 자리에 넣어주면

 

 

 

Detail.vue

 

  

    
    
    
    
  
<template>
  <div>
    <h4>상세 페이지</h4>
    <h5>{{blog[$route.params.id].title}}</h5>
    <p>{{blog[$route.params.id].date}}</p>
    <p>{{blog[$route.params.id].content}}</p>
  </div>
</template>

<script>
export default {
    name: 'Detail',
    props : {
        blog: Array,
    }
}
</script>

<style>
</style>

 

 

 

입력하는 숫자에 해당하는 데이터가 출력되는 것을 확인할 수 있다.

 

 

 

 

 

 

 

 

 

4. 파라미터 문법 ++

 

이 외에도 사용할 수 있는 파라미터 문법은 굉장히 많다.

 

 

 

숫자만 찾아주는 정규식 문법

아무 문자가 아니라 입력받을 값을 숫자로만 제한하고 싶을 경우 소괄호 안에 정규식 입력 가능

 

 

 

반복

* 를 사용하면 :id를 반복해서 작성하는 것과 같은 의미

 

 

등등...

 

 

 

 

 

▼▼▼  더 많은 정규식은 하단 링크 참고하면 도움이 될 것 같다 :)

https://router.vuejs-korea.org/ko/guide/essentials/route-matching-syntax.html

경로 매칭 문법 | Vue Router