# children만들기
{
path: "/detail/:index",
component: Detail,
children: [
{
path: "author",
component : Author
},
{
path: "comment",
component : Comment
},
]
},
이렇게 칠드런 컴포넌트를 써주면 됨.
author은
detail/:index/author으로 연결이 되는거임.
물론 import해줘야함.
# detail.vue에서
<router-view :posts="posts"></router-view>
으로 갖다쓰면됨.
연결은
<h3 v-on:click="$router.push(`/detail/${$route.params.index}/author`)">{{posts[$route.params.index].title}}</h3>
이렇게 해줬음.
## router함수
# push함수
<h3 v-on:click="$router.push(`/detail/${$route.params.index}/author`)">
여기서 제목을 클릭하면
detail/~/author이라는 라우터를 기본 주소에 붙여준다는거임.
페이지 이동되는거.
# go함수
$router.go(1) 앞으로 가기
$router.go(-1)뒤로가기
app.vue에 만들어줬는데
<h5 v-on:click="$router.go(-1)">뒤로가기</h5>
<h5 v-on:click="$router.go(+1)">앞으로가기</h5>
클릭하면 앞으로가기 뒤로가기 되는거임.
$route.params.fullPath 이건 전체
next.router.vuejs.org여기에 여러가지 라우터 기능들 있음.
'javaScript > vueJs' 카테고리의 다른 글
vue js // setup()함수안에서 props 데이터 사용하기. (0) | 2022.08.25 |
---|---|
vue 라우터 메서드안에서 사용하기 (0) | 2022.08.05 |
vue js 기본 // 라우터 (0) | 2022.07.28 |
vue js 기본 // multi word 에러 (0) | 2022.07.28 |
vueJsvue js 기본 // 인풋창 & watch (0) | 2022.07.09 |