레이아웃은 똑같은데 똑같은 페이지 100개를 만들고 싶다면
100개의 vue 파일을 만들면 될까?
아니, 파라미터 문법 쓰면 된다.
ex) example.com/detail/:작명
그 이후 URL 정보를 가져와야 하니까 $route 쓰면 된다.
$route.params.id <- URL 정보에 있는 파라미터 중 id를 가져와.
파라미터에 정규식을 사용할 수도 있음
필요하면 vue-router 4 공식 문서를 확인.
404 페이지도 만들 수 있음
ex ) example.com/fwemkdsvkdds
/:anything(.*) <- 모든 문자라는 정규식 문법
404뷰 페이지 만들면 됨.
그리고 router는 순서에 우선권을 받음
Nested routes
/detail/0 에 접속하면 detail 페이지가 보인다.
/detail/0/author 에 접속하면 detail 페이지 하단부에 작가소개란이 보인다.
/detail/0/comment 에 접속하면 detail 페이지 하단부에 댓글란이 보인다.
이런 특정 페이지 내에서 또 라우트를 나누는 경우에 Nested routes를 사용함
항상 children 의 path는 상대경로로 해야됨 -> / 빼주란 말임
nested routes 만드는 법은
children : {} <- 이렇게 만들면 된다.route 안에 또 route를 만든거임
문제는 Author, Children을 어디서 보여줄지 정해줘야함.
어디서 보여줄지는 router-view 를 사용해서 children : {} 안에 있는 컴포넌트를 보여주면 됨.
숙제
list 페이지에서 제목 클릭하면 상세페이지 이동
나는 router-link to 를 사용했고 리스트에 있는 number를 파라미터에 주면 된다고 생각했다.
선생님은 @click를 활용하여 router.push() 메서드를 사용하셨음.
routes와 router 를 헷갈리면 안되는데
routes : URL 에 있는 정보들을 조회
router : 페이지 이동
vue router 4버전의 자세한 내용을 알고 싶다면!
-> https://next.router.vuejs.org/
