热更新

在开发模式下，Vite 文件路由插件会自动监听页面目录的文件变化，并实时更新路由配置，无需手动重启开发服务器。

自动热更新

Vite 插件会自动处理以下文件变化：

新增页面文件 — 自动注册新路由
删除页面文件 — 自动移除对应路由
重命名页面文件 — 自动更新路由路径
修改页面内容 — 触发组件热更新

插件通过虚拟模块 virtual:vitarx-router:routes 提供路由配置，当文件发生变化时，虚拟模块会被重新生成，触发 Vite 的 HMR 机制。

handleHotUpdate

handleHotUpdate 函数用于在路由配置变化时动态更新路由器实例。从 vitarx-router/auto-routes 导入：

import { handleHotUpdate } from 'vitarx-router/auto-routes'

基本用法

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

const router = createRouter({ routes })

if (import.meta.hot) {
  handleHotUpdate(router)
}

带回调的用法

handleHotUpdate 支持传入回调函数，在路由更新完成后执行自定义逻辑：

if (import.meta.hot) {
  handleHotUpdate(router, newRoutes => {
    // 路由更新完成后添加自定义重定向
    router.addRoute({
      path: '/new-about',
      redirect: '/about'
    })
  })
}

工作原理

handleHotUpdate 内部执行以下操作：

清空旧路由 — 调用 router.manager.clearRoutes() 移除所有已注册路由
注册新路由 — 遍历新的路由数组，逐个调用 router.manager.addRoute() 注册
执行回调 — 如果提供了 onRoutesUpdated 回调，在路由注册完成后调用
更新当前路由元数据 — 将当前路由的 meta 同步为最新值
刷新页面 — 如果当前路由在新路由表中不再匹配，自动刷新页面

handleHotUpdate 仅在开发环境下生效（通过 import.meta.hot 判断）。生产构建时该代码会被自动移除。

完整示例

// src/router/index.ts
import { createRouter } from 'vitarx-router'
import { routes, handleHotUpdate } from 'vitarx-router/auto-routes'

export const router = createRouter({
  routes
})

// 添加自定义重定向
function addRedirects() {
  router.addRoute({
    path: '/new-about',
    redirect: '/about'
  })
}

// 开发环境热更新
if (import.meta.hot) {
  handleHotUpdate(router, newRoutes => {
    // 路由更新后重新添加自定义重定向
    addRedirects()
  })
} else {
  // 生产环境直接添加
  addRedirects()
}

热更新