Nested routes & push 함수 (모달창 말고 url로 나누고 싶을 때)

const routes = [
  {
    path: "/",
    component: Home,
  },
  {
    path: "/list",
    component: List,
  },
  {
    path: "/detail/:id*",
    component: Detail,
    children: [
      {
        path: "author",
        component: Author.vue
      },
      {
        path: "comment",
        component: Conmment.vue
      }
    ]
  }
];

 

/detail/0/author 형식으로 사용이 가능하며, 컴포넌트는 임폴트해서 자리에 넣어주면 된다.

 

페이지 안에서 컴포넌트를 불러올 때에 사용한다.

 

한페이지에서 여러개의 컴포넌트를 보여주고 싶을 때

  {
    path: "/list",
    component: {
      List : List,
      Comment : Comment
    },
  },

 

 

다른 방법들은 https://router.vuejs.org/

Vue Router | The official Router for Vue.js

 

공식 홈페이지에서 확인 할 수 있다