[Vue]9. Router - param / nested routes

주어진 경로 패턴이 같거나 비슷한 컴포넌트가 필요한 경우가 있다.
예로들어 제품의 상세페이지, 같은 그룹안에 있는 글 등
상품경로/Detail/1,상품경로/Detail/2...
https://velog.io/@kmmkyung/글의 URL
전체적인 패턴은 비슷하나 내용만 다를것이다.

routes에 path, component를 여러개 등록해도 되지만 효율적이지 않다.
상품이 100개라면 100개를 만들어야 하니까...ㅠ
그럴때 사용할 수 있는 동적 파라미터가 params이다!

params

주어진 경로 패턴이 같거나 비슷한 컴포넌트가 필요한경우 Vue Router에서 경로에 동적 세그먼트를 사용하여 구현할 수 있다.
이 세그먼트를 파라미터(param)라고 한다.

사용하기

params는 :(콜론)으로 시작한다.
경로:뒤에 아무거나 작성했을때 항상 앞 주소를 보여주라는 뜻이다.

import user from "경로"

// 이 경로들은 `createRouter`에 전달됨.
const routes = [
  // 동적 세그먼트는 콜론으로 시작.
  // /users/뒤에 아무거나 작성했을때 항상 user 컴포넌트를 보여주세요!
  { path: '/users/:id', component: User },
]

이제 user/:id값을 입력하면 이동한다.
문제는 /user/0 이나 /user/1은 같은 경로로 이동하는게 문제이다.

---

$route.params

/경로가 일치하면 파라미터 값은 모든 컴포넌트에서 this.$route.params로 노출된다.
즉 현재 :params값을 알 수 있다!

예시1)
{ path: '/users/:id/', component: User }

👇 id값으로 012 입력하면 매치되는 경로
주소/users/012

👇 $route.params의 값
{ id: '012' }

예시2)
{ path: '/users/:id/:name', component: User }

👇 id값으로 012/name값 mk을 입력하면 매치되는 경로
주소/users/012/mk

👇 $route.params의 값
{ id: '012', name:'mk'}

<template>
  <div>
    <h2>상세페이지{{ $route.params.id }}</h2>
    <h5>{{ 블로그글[$route.params.id].title }}</h5>
    <p>상세페이지임</p>
  </div>
</template>

해당 id의 데이터로 보여줄 수 있을것!

nested routes

특정 페이지 내에서 또 라우트를 나누는 경우
장점은 뒤로가기 앞으로가기 버튼이 동작한다.

예로들어
/detail/0/author로 접속하면 detail 페이지 내에서 작가소개란을 보여주고
/detail/0/comment로 접속하면 detail 페이지 내에서 댓글란을 보여주도록 하려면 nested routes를 사용하면 된다.

사용하기

1. routes 변수에 있는 해당 객체에 children 값을 추가해준다
   children의 path는 상대경로로 입력해줘야 한다!(/을 붙이지 말것!)

// 해당 컴포넌트 import from 경로

const routes = [
  {
    path : '/detail/:id',
    component : Detail,
    children : [
      { path : 'author', component : Author },
      { path : 'comment', component : Comment },
    ]
  }
]

2. 보여줄 컴포넌트로에서 children의 위치 설정해주기 👉 <router-view>로!

<template>
  <div>
    <h2>상세페이지{{ $route.params.id }}</h2>
    <h5>{{ 블로그글[$route.params.id].title }}</h5>
    <p>상세페이지임</p>
    <!-- children 어디에 보여줄지 -->
    <router-view></router-view>
  </div>
</template>