Nuxt i18n俄文路由直接访问解码失败问题求助

这个问题我之前帮朋友排查过类似情况，核心原因是：用nuxt-link跳转时Nuxt会自动处理路由编码，但刷新页面时，浏览器会把地址栏里的俄文路径编码成百分号形式，而Nuxt默认的路由匹配逻辑没有对编码后的路径做解码处理，导致无法匹配到预设的俄文路由规则。

下面是几个亲测有效的解决方案：

方案一：添加全局路由中间件处理路径解码 #

这是最通用、见效最快的方案，适合大多数场景：

1. 在项目的middleware目录下新建decode-route.js文件，内容如下：

export default function ({ route, redirect }) {
  // 检查当前路径是否是编码后的状态
  if (route.path !== decodeURI(route.path)) {
    // 解码后重定向到正确的路由，保留查询参数
    return redirect({
      path: decodeURI(route.path),
      query: route.query
    })
  }
}

2. 在nuxt.config.js中注册这个全局中间件：

export default {
  // ...其他配置项
  router: {
    middleware: ['decode-route']
  },
  // 你的nuxtI18n配置保持不变
  nuxtI18n: { 
    paths: { 
      en: "/for-sale/", 
      es: "/en-venta/", 
      ru: "/для-продажи/", 
    } 
  }
}

这个中间件会在每次路由进入前检查路径状态，如果发现是编码后的路径，就自动解码并重定向，让Nuxt能正确匹配到你的俄文路由规则。

方案二：自定义nuxt-i18n路由匹配规则 #

如果你的路由数量不多，可以手动注册路由并调整匹配逻辑，确保支持编码后的路径：

在nuxt.config.js的nuxtI18n配置中修改：

nuxtI18n: {
  paths: { 
    en: "/for-sale/", 
    es: "/en-venta/", 
    ru: "/для-продажи/", 
  },
  parsePages: false,
  // 手动注册页面路由
  pages: {
    'for-sale': {
      ru: '/для-продажи/'
    }
  },
  routerOptions: {
    // 自定义路由规则，允许匹配编码后的路径
    routes: [
      {
        path: '/ru/(для-продажи|%D0%B4%D0%BB%D1%8F-%D0%BF%D1%80%D0%BE%D0%B4%D0%B0%D0%B6%D0%B8)/',
        name: 'ru-for-sale',
        component: () => import('~/pages/for-sale.vue')
      }
    ]
  }
}

这里的路由路径同时包含了俄文原字符和编码后的字符串，确保两种形式都能匹配到对应的页面。

方案三：生产环境服务器配置（如Nginx） #

如果是部署到生产环境，比如用Nginx做反向代理，需要在服务器配置中添加编码支持，确保服务器能正确解码路径后再转发给Nuxt：

server {
  # ...其他基础配置
  charset utf-8;
  location / {
    try_files $uri $uri/ /index.html;
    # 处理编码后的路径
    set $decoded_path $uri;
    if ($decoded_path ~* "^/ru/%[0-9A-Fa-f]+") {
      set $decoded_path "/ru${decoded_path}";
    }
    rewrite ^ $decoded_path break;
  }
}

这个配置能让Nginx自动处理俄文编码路径，转发给Nuxt时已经是解码后的形式，从而顺利匹配路由。

优先推荐方案一，本地开发和生产环境都能轻松解决问题，且不需要修改太多现有配置。

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