내비게이션 인식

데이터 가져오기가 내비게이션 가드 안에서 발생하므로, 일반 내비게이션 가드처럼 내비게이션을 제어할 수 있습니다:

• throw된 오류(또는 reject된 Promise)는 내비게이션을 취소하며(일반 내비게이션 가드와 동일한 동작), Vue Router의 오류 처리에서 가로챕니다
• reroute()를 호출하여 내비게이션을 리다이렉트하거나 취소할 수 있습니다

그 외에 반환된 값은 모두 해결된 데이터 로 간주되며 data 속성에 나타납니다.

reroute()로 내비게이션 제어하기

reroute()는 데이터 로더 내부에서 현재 내비게이션을 변경합니다. 내비게이션을 변경하는 한 내비게이션 가드의 반환값과 동일한 인자를 받습니다. true나 undefined는 내비게이션을 변경하지 않으므로 받을 수 없습니다. 내부적으로 throw 하여 로더 실행을 즉시 중단합니다.

import { reroute } from 'vue-router/experimental'
import { defineBasicLoader } from 'vue-router/experimental'

export const useUserData = defineBasicLoader(
  async (to) => {
    // 유효하지 않은 ID에 대해 내비게이션을 취소합니다
    if (isInvalidId(to.params.id)) {
      reroute(false)
    }

    try {
      const user = await getUserById(to.params.id)

      return user
    } catch (error) {
      if (error.status === 404) {
        reroute({ name: 'not-found' })
      } else {
        throw error // 라우터 내비게이션을 중단합니다
      }
    }
  }
)

TIP

reroute()는 내부적으로 throw하며(반환 타입은 never), 호출한 뒤에 return이나 else를 사용할 필요가 없습니다.

일관된 업데이트

내비게이션 중에는 데이터 로더가 하나의 묶음 처럼 함께 그룹화됩니다. 내비게이션이 취소되면 어떤 결과도 사용되지 않습니다. 이렇게 하면 페이지에서 일부 데이터만 업데이트되거나 URL과 페이지 내용 사이에 불일치가 생기는 일을 피할 수 있습니다. 반대로 내비게이션이 성공하면 모든 데이터 로더가 함께 해결되고, 모든 로더가 해결된 뒤에만 데이터가 업데이트됩니다. 이는 lazy loader에도 동일하게 적용됩니다. 따라서 매우 빠른 로더가 있더라도 모든 로더가 해결되고 새 데이터가 완전히 표시될 준비가 될 때까지는 기존 데이터가 표시됩니다.

Lazy 로더

일관된 업데이트를 제외하면 lazy loader는 내비게이션을 인식하지 않습니다. 오류나 reroute()로 내비게이션을 제어할 수 없습니다. 그래도 내비게이션이 시작되자마자 로딩을 시작합니다.

내비게이션 후 로딩

내비게이션이 끝날 때까지 데이터 로딩을 시작하지 않도록 할 수도 있습니다. 그러려면 로더를 페이지에 연결하지 않으면 됩니다. 그러면 페이지가 마운트될 때 로딩이 시작됩니다.