[Vue.js] nested routes와 push

 

vue-router의 개념은 아래 포스팅을 통해 확인 가능하다.

 

 

 

https://wonisdaily.tistory.com/203

[Vue.js] vue-router란 ? 기본 개념과 설치 방법

 

 

 

 

📑 nested routes

 

실제 웹이나 앱 UI는 일반적으로 여러 단계로 중첩된 컴포넌트로 이루어져 있다. 예를들어 상세보기 페이지에 작가 소개글이 보이기도 하다 다른 경로로 들어가면 그 자리에 댓글창이 보이기도 한다. 이 중첨 outlet에 컴포넌트를 렌더링하려면  children을 사용해야한다. 

 

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

 

코드를 보면 알 수 있듯이 children 옵션은 routes와 같은 라우트 설정 객체의 또 다른 배열이다. 따라서 필요한만큼 중첩 된 뷰를 유지할 수 있다. 

 

 

 

 

📑 router push 사용하기

 

 

$route : 현재 url에 관련된 경로를 알려주는 변수

$router : 페이지 이동이나 라우터 자체와 관련된 기능

ex) $router.go(-1) 뒤로가기 , $router.go(1) 앞으로가기

 

 

 <div class="mt-4">
    <h5 @click="$router.push('/detail/0')">{{ 블로그글[0].title }}</h5>
    <p>{{ 블로그글[0].content }}</p>
    <p>{{ 블로그글[0].date }}</p>
  </div>