동적 라우팅

Watch a free video lesson on Vue School

라우터에 라우트를 추가하는 작업은 보통 routes 옵션으로 이뤄지지만, 어떤 상황에서는 애플리케이션이 이미 실행 중인 상태에서 라우트를 추가하거나 제거하고 싶을 수 있습니다. Vue CLI UI처럼 확장 가능한 인터페이스를 가진 애플리케이션은 이를 활용해 애플리케이션을 확장할 수 있습니다.

라우트 추가하기

동적 라우팅은 주로 router.addRoute()와 router.removeRoute() 두 함수로 구현합니다. 이 함수들은 새 라우트를 등록만 하므로, 새로 추가한 라우트가 현재 location과 매치되더라도 그 라우트를 표시하려면 router.push() 또는 router.replace()로 직접 내비게이션해야 합니다. 예를 살펴봅시다:

다음처럼 하나의 라우트만 가진 라우터가 있다고 가정해 봅시다:

const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/:articleName', component: Article }],
})

/about, /store, /3-tricks-to-improve-your-routing-code 같은 어떤 페이지로 가더라도 결국 Article 컴포넌트가 렌더링됩니다. /about에 있는 상태에서 새 라우트를 추가하면:

router.addRoute({ path: '/about', component: About })

페이지에는 여전히 Article 컴포넌트가 표시됩니다. 현재 location을 바꾸고 지금 위치를 덮어쓰기 위해 router.replace()를 직접 호출해야 합니다(새 항목을 push하면 히스토리에 같은 location이 두 번 남게 되므로):

router.addRoute({ path: '/about', component: About })
// this.$route나 useRoute()를 사용할 수도 있습니다
router.replace(router.currentRoute.value.fullPath)

새 라우트가 표시될 때까지 기다려야 한다면 await router.replace()를 사용할 수 있다는 점을 기억하세요.

내비게이션 가드 안에서 라우트 추가하기

내비게이션 가드 안에서 라우트를 추가하거나 제거하기로 했다면 router.replace()를 호출하지 말고, 새 location을 반환해 리다이렉트를 트리거해야 합니다:

router.beforeEach(to => {
  if (!hasNecessaryRoute(to)) {
    router.addRoute(generateRoute(to))
    // 리다이렉트를 트리거합니다
    return to.fullPath
  }
})

위 예제는 두 가지를 가정합니다. 첫째, 새로 추가한 라우트 레코드가 to location과 매치되어 결과적으로 원래 접근하려던 것과 다른 location이 됩니다. 둘째, 무한 리다이렉트를 피하기 위해 새 라우트를 추가한 뒤 hasNecessaryRoute()가 true를 반환합니다.

우리는 리다이렉트하고 있으므로 진행 중인 내비게이션을 대체하게 되며, 이는 앞서 본 예제와 사실상 같은 동작입니다. 실제 시나리오에서는 라우트 추가가 내비게이션 가드 바깥에서 이뤄질 가능성이 더 높습니다. 예를 들어 뷰 컴포넌트가 마운트될 때 새 라우트를 등록할 수 있습니다.

라우트 제거하기

기존 라우트를 제거하는 방법은 몇 가지가 있습니다:

• 충돌하는 이름의 라우트를 추가하는 방법입니다. 기존 라우트와 같은 이름의 라우트를 추가하면, 먼저 기존 라우트를 제거한 뒤 새 라우트를 추가합니다:

  router.addRoute({ path: '/about', name: 'about', component: About })
  // 같은 이름을 갖고 있고 이름은 모든 라우트에서 고유해야 하므로
  // 이전에 추가한 라우트를 제거합니다
  router.addRoute({ path: '/other', name: 'about', component: Other })

• router.addRoute()가 반환한 콜백을 호출하는 방법입니다:

  const removeRoute = router.addRoute(routeRecord)
  removeRoute() // 라우트가 존재하면 제거합니다

  이 방법은 라우트에 이름이 없을 때 유용합니다

• router.removeRoute()를 사용해 이름으로 라우트를 제거하는 방법입니다:

  router.addRoute({ path: '/about', name: 'about', component: About })
  // 라우트를 제거합니다
  router.removeRoute('about')

  이 함수를 사용하면서 이름 충돌을 피하고 싶다면 라우트 이름에 Symbol을 사용할 수도 있습니다.

라우트가 제거되면 그 라우트의 모든 alias와 children도 함께 제거됩니다.

중첩 라우트 추가하기

기존 라우트에 중첩 라우트를 추가하려면 router.addRoute()의 첫 번째 매개변수로 해당 라우트의 이름 을 전달하면 됩니다. 그러면 마치 children을 통해 추가한 것처럼 라우트가 추가됩니다:

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

이는 다음과 같습니다:

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

기존 라우트 살펴보기

Vue Router는 기존 라우트를 살펴볼 수 있는 두 가지 함수를 제공합니다:

• router.hasRoute(): 라우트가 존재하는지 확인합니다.
• router.getRoutes(): 모든 라우트 레코드가 담긴 배열을 가져옵니다.