Nuxt.js SSR模式下<nuxt-link :to>生成href异常问题排查

我在Nuxt中定义了一个接收6个参数的命名路由，使用<nuxt-link>结合localePath生成跳转链接，传入的参数值如下：

• item: 'item-name'
• location: 'amsterdam'
• inventory: 5
• city: 25
• page: 1
• radius: 60

<nuxt-link>代码如下：

<nuxt-link :to="localePath({ name: 'search-item-location-inventory-city-page-radius', 
  params: { 
    item: slugify(item), 
    location: slugify(city.name),
    inventory: inventoryId, 
    city: city.id, 
    page: 1, 
    radius: addressMaxRadius()
  }
})">
  {{ item }}
</nuxt-link>

预期SSR生成的href应为"/search/item-name/amsterdam/5/25/1/60"，但实际生成的href为"/"。以下是我的nuxt.config.js配置：

export default {
  ssr: true,
  target: 'server',
  head: {
    htmlAttrs: { lang: 'en' },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap' }
    ]
  },
  css: ['@/assets/scss/app.scss'],
  plugins: [
    { src: '~/plugins/axios.js' },
    { src: '~/plugins/bootstrap.js', mode: 'client' },
    { src: '~/plugins/chart.js', mode: 'client' },
    { src: '~/plugins/lodash.js' },
    { src: '~/plugins/maps.js', mode: 'client' },
    { src: '~/plugins/moment.js', mode: 'client' },
    { src: '~/plugins/mixins.js' }
  ],
  components: true,
  buildModules: [],
  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
    '@nuxtjs/fontawesome',
    '@nuxtjs/i18n',
    '@nuxtjs/moment',
    '@nuxtjs/pwa',
    'nuxt-vue-select'
  ],
  auth: {
    strategies: {
      local: {
        token: { property: 'token', global: true, required: true, type: 'Bearer' },
        user: { property: 'data', autoFetch: true },
        endpoints: {
          login: { url: '/api/potato/authentication/login', method: 'post', propertyName: 'token' },
          user: { url: '/api/potato/users/current', method: 'get', propertyName: 'data' },
          logout: { url: '/api/potato/authentication/logout', method: 'post' }
        },
        tokenType: 'Bearer'
      }
    },
    redirect: { login: '/login', logout: '/', home: false }
  },
  axios: { baseUrl: process.env.API_BASE_URL },
  bootstrapVue: { bootstrapCSS: false, icons: false },
  fontawesome: { icons: { solid: true, regular: true, brands: true } },
  i18n: {
    detectBrowserLanguage: false,
    strategy: 'prefix',
    locales: [
      { code: 'pl', name: 'Polski', file: 'pl.js' },
      { code: 'en', name: 'English', file: 'en-us.js' }
    ],
    lazy: false,
    langDir: 'lang/',
    defaultLocale: 'pl'
  },
  build: {}
}

请问导致SSR无法生成正确href属性的原因可能是什么？

1. 命名路由未正确定义 #

Nuxt的命名路由由pages目录下的文件结构自动生成，需确认路由文件的命名和层级是否匹配目标命名路由：

• 若目标路由为search-item-location-inventory-city-page-radius，对应的文件路径应为pages/search/_item/_location/_inventory/_city/_page/_radius.vue
• 可通过启动项目后在Vue Devtools的路由面板中查看生成的路由列表，确认该命名路由是否存在

2. SSR阶段参数缺失或无效 #

SSR运行在服务器端，部分数据或方法可能未正确初始化，导致参数值为空/undefined：

• 检查inventoryId、city.id、city.name是否在asyncData或fetch中完成了服务端数据获取，确保SSR时已有有效值
• 检查addressMaxRadius()方法是否依赖客户端API（如window），这类方法在SSR环境下会报错或返回空值，需改用兼容SSR的实现
• 检查slugify函数是否能在SSR环境正常运行，若它依赖客户端环境，需替换为服务端可执行的版本

3. i18n路由配置问题 #

使用localePath时，需确保该命名路由在i18n配置中正确注册：

• 确认i18n模块已正确扫描到该路由，且在所有启用的locale（pl/en）下都存在对应的路由定义
• 检查strategy: 'prefix'配置下，默认locale（pl）的路由是否未被正确生成，比如前缀拼接逻辑是否导致路由匹配失败

4. 路由参数类型不匹配 #

若路由定义中参数的类型（如数字/字符串）与传入值不匹配，可能导致路由匹配失败：

• 比如路由中inventory定义为数字类型，但inventoryId传入的是字符串，或反之，可能触发路由匹配失败
• 可尝试将所有参数转为字符串后传入，验证是否能生成正确路径

5. Auth模块的重定向干扰 #

即使目标路由不需要认证，Auth模块的全局守卫也可能影响路由生成：

• 检查Auth的redirect配置和全局守卫，是否存在未登录时重定向到根路径的逻辑，且SSR阶段用户未登录触发了该重定向
• 可临时禁用Auth模块测试，确认是否能生成正确的href

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