Hot Module Replacement

definePage()와 <route> 블록을 사용할 때는 라우트에 대해 Hot Module Replacement(HMR)를 활성화하여, 라우트를 변경할 때 페이지나 서버를 다시 로드할 필요를 없앨 수 있습니다.

HMR 활성화는 강력히 권장되며, 현재는 Vite에서만 동작합니다.

import { createRouter, createWebHistory } from 'vue-router'
import {
  routes,
  handleHotUpdate, 
} from 'vue-router/auto-routes'

export const router = createRouter({
  history: createWebHistory(),
  routes,
})

// 페이지를 다시 로드하지 않고 런타임에 라우트를 업데이트합니다
if (import.meta.hot) { 
  handleHotUpdate(router) 
} 

런타임 라우트

런타임에 라우트를 추가한다면 개발 중에도 추가되도록 콜백 안에서 추가해야 합니다.

import { createRouter, createWebHistory } from 'vue-router'
import { routes, handleHotUpdate } from 'vue-router/auto-routes'

export const router = createRouter({
  history: createWebHistory(),
  routes,
})

function addRedirects() {
  router.addRoute({
    path: '/new-about',
    redirect: '/about?from=/new-about',
  })
}

if (import.meta.hot) {
  handleHotUpdate(router, (newRoutes) => { 
    addRedirects() 
  }) 
} else {
  // 프로덕션
  addRedirects()
}

이것은 선택 사항이며, 페이지를 다시 로드해도 됩니다.