Nuxt3修改页面文件时HMR丢失Query参数的问题咨询

1. 修改页面文件时保留HMR中的Query参数 #

可以通过以下几种方案实现：

• 客户端钩子暂存并恢复Query：在客户端插件中监听页面生命周期钩子，暂存当前Query并在路由更新后恢复。创建plugins/client-preserve-query.ts：

export default defineNuxtPlugin((nuxtApp) => {
  if (process.dev) {
    let cachedQuery: Record<string, string | string[]> = {}

    // 页面开始更新前缓存当前Query
    nuxtApp.hook('page:start', () => {
      cachedQuery = { ...useRoute().query }
    })

    // 页面更新完成后，若Query为空则恢复缓存的参数
    nuxtApp.hook('page:finish', () => {
      const route = useRoute()
      if (Object.keys(cachedQuery).length && Object.keys(route.query).length === 0) {
        navigateTo({ path: route.path, query: cachedQuery }, { replace: true })
      }
    })
  }
})

• 配合页面状态保留选项：在页面组件中添加definePageMeta({ preserveState: true })，该选项会保留页面组件的状态，结合上面的钩子能更稳定地保留Query参数。
• 调整Vite HMR更新类型：在nuxt.config.ts中修改Vite的HMR配置，将页面文件的更新类型改为组件重载，避免路由级刷新：

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        onUpdate: (update) => {
          if (update.type === 'js-update' && update.path?.includes('pages/')) {
            update.type = 'vue-reload'
          }
        }
      }
    }
  }
})

2. 页面文件修改导致参数丢失的原因 #

• Nuxt3基于文件系统生成路由，修改pages目录下的文件时，Nuxt会重新生成routes.mjs路由配置文件，触发路由模块的HMR更新。默认情况下，这种路由模块更新会重置当前路由实例，仅保留路径部分，不会自动携带原有的Query参数。
• 页面文件的修改属于路由级别的变更，会触发整个页面组件的替换，而非普通组件的局部HMR更新，因此路由的Query参数没有被默认保留。

3. 问题根源：Nuxt路由机制而非Vite #

• 该问题并非Vite导致，核心原因是Nuxt3的文件系统路由机制。当页面文件修改时，Nuxt的路由生成器会重新生成路由配置，并通过HMR通知客户端更新路由模块，而Nuxt默认的路由更新逻辑未包含保留Query参数的处理。
• 普通组件修改时，Vite仅触发组件的局部HMR更新，不会涉及路由模块的重新加载，因此Query参数得以保留。

内容的提问来源于stack exchange，提问作者user20042604