router에서 페이지나누기

보통 url디자인은 /어쩌구/1 이면 1번글을 /어쩌구/2 이면 2번글을 보여준다.

이런건 route에

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

이런 식으로 /detail/:작명 이렇게 사용할 수 있는데, 이러면 /detail/아무거나 적으면 보여주게 된다. 이걸 파라미터 문법이라고 한다. 근데 들어갈 때마다,

<template>
  <div>
    <h4>디테일페이지</h4>
    <h5>글제목</h5>
    <p>글설명~</p>
  </div>
</template>

 ,html이 이러면 똑같은 페이지만 보여주니까, detail뒤에 오는 숫자에 따라 디테일 페이지를 바꿔보자.

<template>
  
  <div>
    <h4>디테일페이지</h4>
    <h5>{{블로그글[$route.params.id].title}}</h5>
    <p>{{블로그글[$route.params.id].content}}</p>
  </div>
</template>

<script>
export default {
    name : 'Detail',
    props: {
    블로그글 : Array,
  }
}
</script>

먼저 props를 받아오고, $route라는 route의 정보를 담고있는 문법을 이용해 $route.params라는 파라미터문법중에 이름이 id라는걸 받아오게 하면 detail/:id에 적은 값이 오게 된다.

 

파라미터문법엔 정규식도 사용가능하다. 예를 들어서 숫자만 오게하려면

path: "/detail/:id(\\d+)",

이렇게 소괄호 안에 입력해주면 된다.

그리고, 

path: "/detail/:id*",

이렇게 *을 입력하면 :id/:id/:id 이런 반복을 나타낸다.

 

마지막으로 route는 비슷한 경로로 걸리면 위에 컴포넌트를 보여준다.