6. vue-router 파헤치기 - RouteRecordRaw 에 관하여

route.ts 에서

import type { RouteRecordRaw } from "vue-router";
export const route: RouteRecordRaw[] = [{}]

형태로 경로 구조가 짜여진다는 것을 앞서 설명한적이 있다.

이것을 조금 상세히 파고들려고 한다.

타입스크립트에서는 변수의 타입을 지정한다.
그러니까 route라는 변수는 RouteRecordRaw[] 의 형식을 지니고 있다는 것을 의미한다.

RouteRecordRaw는 그럼 무엇일까?

앞서 npm i vue-router라는 명령어로 설치되어 node-modules라는 폴더에 들어있는 vue-router가 가지고 있는 타입이다.

RouteRecordRaw의 기본 형태는 다음과 같다.
redirect 같은 값도 있지만, 그런것을 상세히 다루려면 원문참조

  {
    path: "/",
    name: "",
    meta: {},
    component: () => import(""),
    children: [
    ]
  }

1depth의 경로는 설명하기에 적합하진 않으므로 확장하여 3depth의 경로를 예시로 들겠다.

router/route.ts

import type { RouteRecordRaw } from "vue-router";
export const route: RouteRecordRaw[] = [
  {
    path: "/error",
    name: "error",
    meta: {},
    component: () => import("@/views/layouts/EmptyLayout.vue"),
    children: [
      {
        path: "notFound",
        name: "notFound",
        meta: {},
        component: () => import("@/views/contents/error/404.vue")
      }
    ]
  },
  {
    path: "/:pathMatch(.*)*",
    redirect: "/error/notFound"
  },
  {
    path: "/"
    name: "",
    meta: {},
    component: () => import("@/views/layouts/CommonLayout.vue"),
    children: [
      {
        path: "",
        name: "home",
        meta: {},
        component: () => import("@/views/home/Main.vue"),
      },
      {
        path: "/",
        name: "snb",
        meta: {},
        component: () => import("@/views/layouts/CommonSnb.vue"),
        children: [
          {
            path: "article",
            name: "article",
            meta: {},
            children: [
              {
                path: "main/:page",
                name: "ArticleMain",
                meta: {},
                component: () => import("@/views/contents/article/ArticleMain.vue")
              },
              {
                path: "view/:id",
                name: "ArticleView",
                meta: {},
                component: () => import("@/views/contents/article/ArticleView.vue")
              },
            ]
          }
        ]
      }
    ]
  }
]

간단한 경로를 만들어 보았다.

해당 route.ts 파일은 '/', '/article/main/:page', '/article/view/:id' 를 가지는 3depth 구조이다.

RouteRecordRaw 는 children에 RouteRecordRaw 배열을 가지며, 이들이 순차적으로 쌓여 나간다.

예를 들어
/article/main/:page 를 접근한다고 가정하자.

먼저 라우터는 path: "/", 그리고 path: "/", path: "article"를 거쳐 path: "main/:page"에 도달한다.
화면은 이렇게 오는 과정에 있었던 component들이 쌓여 만들어진다.

path: "article" 는 component가 없으므로 /article/main/:page는

"@/views/layouts/CommonLayout.vue"
"@/views/layouts/CommonSnb.vue"
"@/views/contents/article/ArticleMain.vue"

이 한 화면을 이루게 될 것이다.

  {
    path: "/:pathMatch(.*)*",
    redirect: "/error/notFound"
  },

이 부분은 routes.ts에 없는 경로로 접근했을 경우 redirect