router 에 path 와 children 활용

vue는 편이하게 router 에서 children 을 지정하여 특정 컴포넌트들이 동일한 레이아웃을 가져가야할때 사용할 수 있는 유용한 기능이 있다.

const routes = [
  {
    path: "/user",
    component: BasicLayout,
    children: [
      {
        path: "/user/main",
        component: DashboardView,
      },
      {
        path: "/user/projects",
        component: ProjectListView,
      },
      {
        path: "/user/projects/register",
        component: ProjectRegisterView,
      },
    ],
  },
  {
    path: "/",
    name: "login",
    component: LoginView,
  },
  {
    path: "/signup",
    component: MemberRegisterView,
  },
];

이런식으로 아래의 /user 라는 path를 가지는 모든 아이들은 BasicLayout을 가지고 있게 하려고 지정해둔것이다. 근데 여기서 내가 만난 오류는

반응형

const routes = [
  {
    path: "/user",
    component: BasicLayout,
    children: [
      {
        path: "/main",
        component: DashboardView,
      },
      {
        path: "/projects",
        component: ProjectListView,
      },
      {
        path: "/projects/register",
        component: ProjectRegisterView,
      },
    ],
  },
];

이런 식으로 했을 때, 당연히 /user/main 이 Dashboardview를 갈 줄 알았는데. 아니였다. 계속 그 컴포넌트를 가져가지 않길래, 믿져야 본전이지 라는 마음으로 맨 위와같이 /user/main 이라고 지정했더니 그제서야 DashboardView 컴포넌트를 타더라. 유의하자!