# Vue 2에서 마이그레이션

이름을 사용하여 찾을 수 없는 경로로 직접 푸시하지 않으려면 반복되는 매개변수에 `*`를 추가할 필요가 없습니다. `router.push('/not/found/url')` 를 호출하면, 올바른 `pathMatch` 매개변수를 제공됩니다. :::

이유 : Vue Router는 path-to-regexp 사용하지 않고, 대신 경로 순위를 부여하고 동적 라우팅을 가능하게 하는 자체 구문 분석 시스템을 구현합니다. 일반적으로 프로젝트당 하나의 포괄(catch-all) 경로를 추가하기 때문에 * 대한 특수 구문을 지원하는 데 큰 이점이 없습니다. params의 인코딩은 예측하기 쉽게 하기 위해 예외 없이 경로 전체를 인코딩하는 것입니다.

# onReady 를 isReady 로 대체

기존 router.onReady() 함수는 인수를 취하지 않고 Promise를 반환하는 router.isReady() 로 대체되었습니다.

// 이전
router.onReady(onSuccess, onError)
// 이후
router.isReady().then(onSuccess).catch(onError)
// 또는 await 사용하기:
try {
  await router.isReady()
  // 성공
} catch (err) {
  // 에러
}

# scrollBehavior 변경 사항

scrollBehavior 에서 반환된 객체 ScrollToOptions 와 유사합니다. x 는 left 으로 이름이 바뀌고 y top 으로 이름이 바뀝니다. RFC를 참조하십시오.

이유 ScrollToOptions 와 유사한 객체를 만들어 네이티브 JS API에 더 친숙하게 만들고 향후 새로운 옵션을 잠재적으로 활성화할 수 있습니다.

# <router-view> , <keep-alive> 및 <transition>

transition 및 keep-alive는 v-slot API를 통해 RouterView 내부 에서 사용해야 합니다.

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

이유 : 이것은 필요한 변경이었습니다. 관련 RFC를 참조하십시오.

# <router-link> 에서 append prop 제거

append prop이 <router-link> 에서 제거되었습니다. 대신 기존의 path 값을 수동으로 연결할 수 있습니다.

// 이전
<router-link to="child-route" append>to relative child</router-link>
// 이후
<router-link :to="append($route.path, 'child-route')">
  to relative child
</router-link>

App 인스턴스에서 전역 append함수를 정의해야 합니다.

app.config.globalProperties.append = (path, pathToAppend) =>
  path + (path.endsWith('/') ? '' : '/') + pathToAppend

이유 : append 는 자주 사용되지 않으며, 사용자 영역에서 복제하기 쉽습니다.

# <router-link> 에서 event 및 tag prop 제거

event 및 tag props가 모두 <router-link> 에서 제거되었습니다. v-slot API <router-link> 를 완전히 커스텀할 수 있습니다.

// 이전
<router-link to="/about" tag="span" event="dblclick">About Us</router-link>
// 이후
<router-link to="/about" custom v-slot="{ navigate }">
  <span @click="navigate" @keypress.enter="navigate" role="link">About Us</span>
</router-link>

이유: 이러한 props는 종종 <a> 태그와 다른 것을 사용하기 위해 함께 사용되었지만, v-slot API 이전에 도입되었으며, 모든 사람들을 위해 번들 크기에 추가하는 것을 정당화할 만큼 충분히 사용되지 않았습니다.

# <router-link> 에서 exact prop 제거

exact prop는 수정 중이었던 경고가 더 이상 존재하지 않으므로 안전하게 제거할 수 있기 때문에 제거되었습니다. 그러나 다음 두 가지 사항을 알고 있어야 합니다.

• 이제 Routes는 생성된 route 위치 객체와 path , query 및 hash 속성 대신 나타내는 route 레코드를 기반으로 활성화됩니다.
• path 섹션만 일치하고, query 및 hash 는 더 이상 고려되지 않습니다.

이 동작을 커스텀하려면, 예를들어 hash 섹션을 고려하여 v-slot API 를 사용하여 <router-link> 를 확장해야 합니다.

이유 : 자세한 내용은 active matching에 대한 RFC 변경 사항을 참조하십시오.

# mixins의 navigation guards는 무시됩니다.

현재 mixins의 navigation guards는 지원되지 않습니다. vue-router#454 에서 지원을 추적할 수 있습니다.

# router.match 제거 및 router.resolve 변경

router.match 와 router.resolve 는 모두 약간 다른 시그니쳐를 가진 router.resolve 로 병합되었습니다. 자세한 내용은 API를 참조하세요.

이유 : 같은 목적으로 사용되던 여러 방법을 통합.

# router.getMatchedComponents() 제거

router.getMatchedComponents 메소드는 이제 router.currentRoute.value.matched 에서 일치하는 컴포넌트를 검색할 수 있으므로 제거됩니다 :

router.currentRoute.value.matched.flatMap(record =>
  Object.values(record.components)
)

이유 : 이 방법은 SSR 동안에만 사용되었으며 사용자가 수행할 수 있는 짧은 농담입니다.

# 모든 탐색은 이제 항상 비동기식입니다.

첫 번째 탐색을 포함한 모든 탐색은 이제 비동기식입니다. 즉, transition 을 사용하는 경우 앱을 마운트하기 전에 라우터가 준비 될 때까지 기다려야 할 수 있습니다.

app.use(router)
// 참고: 서버 사이트에서는 초기 위치를 수동으로 푸시해야합니다.
router.isReady().then(() => app.mount('#app'))

그렇지 않으면 라우터가 초기 위치(아무것도 않음)를 표시한 다음 첫 번째 위치를 표시하기 때문에 appear prop를 transition 에 제공한 것처럼 초기 전환이 발생합니다.

초기 탐색 시 navigation guards가 있는 경우 서버 측 렌더링(SSR)을 수행하지 않는 한 해결될 때까지 앱 렌더링을 차단하고 싶지 않을 수 있습니다. 이 시나리오에서 라우터가 앱을 탑재할 준비가 될 때까지 기다리지 않으면 Vue 2에서와 동일한 결과를 얻을 수 있습니다.

# router.app 제거

router.app는 라우터를 주입한 마지막 루트 구성 요소(Vue 인스턴스)를 나타내는 데 사용됩니다. Vue Router는 이제 여러 Vue 애플리케이션에서 동시에 안전하게 사용할 수 있습니다. 라우터를 사용할 때 계속 추가할 수 있습니다.

app.use(router)
router.app = app

Router 인터페이스의 TypeScript 정의를 확장하여 app 속성을 추가할 수도 있습니다.

이유 : Vue 3 애플리케이션은 Vue 2에 존재하지 않으며, 이제는 동일한 라우터 인스턴스를 사용하는 여러 애플리케이션을 제대로 지원하므로 app 속성이 있으면 루트 인스턴스 대신 애플리케이션이 되었기 때문에 오해의 소지가 있었습니다.

# route 컴포넌트의 <slot>에 컨텐츠 전달

Before you could directly pass a template to be rendered by a route components' <slot> by nesting it under a <router-view> component:

<router-view>
  <p>In Vue Router 3, I render inside the route component</p>
</router-view>

<router-view>에 대한 v-slot API의 도입으로 인해 v-slot API를 사용하여 <component> 에 전달해야 합니다.

<router-view v-slot="{ Component }">
  <component :is="Component">
    <p>In Vue Router 3, I render inside the route component</p>
  </component>
</router-view>

# route 위치에서 parent 제거

The parent property has been removed from normalized route locations (this.$route and object returned by router.resolve). You can still access it via the matched array:

const parent = this.$route.matched[this.$route.matched.length - 2]

이유 : parent 와 children이 있으면 불필요한 순환 참조가 생성되지만, 속성은 이미 matched 통해 검색될 수 있습니다.

# pathToRegexpOptions 제거

경로 레코드의 pathToRegexpOptions 및 caseSensitive 속성은 createRouter() 대한 sensitive와 strict 옵션으로 대체되었습니다. 이제 createRouter()로 라우터를 생성할 때 직접 전달할 수도 있습니다. path-to-regexp 관련된 다른 모든 옵션 path-to-regexp 가 더 이상 경로를 파싱하는 데 사용되지 않으므로 제거되었습니다.

# 이름 없는 매개변수 제거

path-to-regexp 제거로 인해 이름 없는 매개변수는 더 이상 지원되지 않습니다.

• /foo(/foo)?/suffix 는 /foo/:_(foo)?/suffix 가 됩니다.
• /foo(foo)? 는 /foo:_(foo)? 가 됩니다.
• /foo/(.*) 는 /foo/:_(.*) 가 됩니다.

// 이전
history.pushState(myState, '', url)
// 이후
await router.push(url)
history.replaceState({ ...history.state, ...myState }, '')

// 이전
history.replaceState({}, '', url)
// 이후
history.replaceState(history.state, '', url)

createRouter({ routes: [] })

// 이름을 잘못 입력했습니다.
router.push({ name: 'homee' }) // throws
router.resolve({ name: 'homee' }) // throws

// 주어진 route:
const routes = [{ path: '/users/:id', name: 'user', component: UserDetails }]

// `id` 매개변수가 없으면 실패합니다.
router.push({ name: 'user' })
router.resolve({ name: 'user' })

const routes = [
  {
    path: '/dashboard',
    name: 'dashboard-parent',
    component: DashboardParent,
    children: [
      { path: '', name: 'dashboard', component: DashboardDefault },
      {
        path: 'settings',
        name: 'dashboard-settings',
        component: DashboardSettings,
      },
    ],
  },
]

router.resolve({ name: 'dashboard' }).href // '/dashboard'

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      // 이제 `/parent/home` 대신 `/home`으로 리다이렉트됩니다.
      { path: '', redirect: 'home' },
      { path: 'home', component: Home },
    ],
  },
]