javaScript/vueJs
vue js 기본 // 라우터 기능들.
부엉이사장
2022. 7. 28. 21:29
# 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여기에 여러가지 라우터 기능들 있음.