Nuxt+i18n如何将根路径设为语言选择页并阻止默认跳转

1. 修改nuxt.config.js中的i18n配置 #

调整关键参数，阻止根路径自动跳转并保留带前缀的语言路由：

export default {
  i18n: {
    strategy: 'prefix', // 保持前缀模式
    defaultLocale: 'en',
    langDir: '~/locales/',
    rootRedirect: false, // 核心设置：禁用根路径自动跳转至默认语言
    parsePages: false, // 禁用自动解析页面路由，避免根路径被i18n处理
    pages: {
      // 明确指定需要i18n处理的页面，根路径index无需配置
      'about': { en: '/about', tr: '/hakkimizda' },
      // 其他页面按需添加配置
    },
    vuex: {
      moduleName: 'i18n',
      syncRouteParams: true
    },
    locales: [
      {
        code: 'en',
        iso: 'en',
        name: 'English',
        file: 'en/en.js'
      },
      {
        code: 'tr',
        iso: 'tr',
        name: 'Türkçe',
        file: 'tr/tr.js'
      },
      {
        code: 'es',
        iso: 'es',
        name: 'Español',
        file: 'es/es.js' // 添加西班牙语的语言文件配置
      }
    ]
  }
}

2. 创建根路径语言选择页 #

在pages目录下新建index.vue，作为静态语言选择页面：

<template>
  <div class="language-selector">
    <h1>选择你的语言</h1>
    <div class="language-links">
      <nuxt-link to="/en">English</nuxt-link>
      <nuxt-link to="/es">Español</nuxt-link>
      <nuxt-link to="/tr">Türkçe</nuxt-link>
    </div>
  </div>
</template>

<style scoped>
.language-selector {
  text-align: center;
  margin-top: 50px;
}
.language-links a {
  display: inline-block;
  margin: 0 15px;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}
.language-links a:hover {
  background-color: #f5f5f5;
}
</style>

3. 验证效果 #

• 访问根路径/时，将显示语言选择页，不会自动跳转至默认语言
• 访问/en、/es、/tr会进入对应语言的应用页面
• 配置过的子页面（如/en/about、/tr/hakkimizda）会正常加载对应语言内容

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