Nuxt.js + i18n切换语言后返回页面路由前缀不一致问题求助

问题概述 #

切换语言后点击返回按钮，页面回到切换前的语言前缀路由（如从/id/about返回时回到/en/about），期望返回时保持当前切换后的语言前缀（如回到/id）。

原因分析 #

默认情况下，setLocale方法会将新语言的路由追加到浏览器历史栈中，旧语言的页面记录仍保留在栈内，导致返回时优先加载旧语言页面。直接修改locale.value仅更新语言状态，不会同步修改路由和历史记录，因此会出现翻译不生效或路由不匹配的问题。

解决方案 #

方案1：使用replace模式切换语言 #

修改语言切换方法，为setLocale添加replace: true选项，将当前历史记录替换为新语言路由，而非追加新记录：

const { setLocale } = useI18n();

const handleLanguageSwitch = async (langCode) => {
    await setLocale(langCode, { replace: true });
};

效果：历史栈从['/en', '/en/about', '/id/about']变为['/en', '/id/about']，点击返回后回到/en，此时由于detectBrowserLanguage已将语言cookie更新为id，页面会自动重定向到/id，最终保持语言前缀一致。

方案2：手动生成目标路由并替换历史记录 #

如果方案1未生效，可手动生成对应语言的路由并替换当前历史记录：

const { localePath, locale } = useI18n();
const router = useRouter();

const handleLanguageSwitch = async (langCode) => {
    // 生成当前页面对应目标语言的路由
    const targetRoute = localePath(router.currentRoute.value.name, router.currentRoute.value.params, langCode);
    // 替换当前历史记录
    await router.replace(targetRoute);
    // 同步更新locale状态
    locale.value = langCode;
};

方案3：添加路由中间件确保语言一致性 #

创建全局路由中间件，检测当前路由语言与cookie保存的语言是否一致，不一致则自动重定向：

1. 创建middleware/i18n-redirect.ts文件：

export default defineNuxtRouteMiddleware((to) => {
    const { locale, getLocaleCookie } = useI18n();
    const cookieLocale = getLocaleCookie();
    
    // 如果cookie语言与路由语言不匹配，重定向到对应语言路由
    if (cookieLocale && to.params.lang !== cookieLocale) {
        const targetPath = localePath(to.name, to.params, cookieLocale);
        return navigateTo(targetPath, { replace: true });
    }
});

2. 在nuxt.config.ts中注册全局中间件：

export default defineNuxtConfig({
    // ...其他配置
    router: {
        middleware: ['i18n-redirect']
    }
});

效果：当用户返回旧语言页面时，中间件会自动重定向到当前cookie语言对应的页面，确保语言前缀始终与当前设置一致。

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