vue3 i18n 未定义语言环境

Question

我正在尝试做一个多语言项目，但问题是 redirectreturnsundefined。有没有什么办法解决这一问题？尽管我尽了一切努力，它仍然显示 undefined 并且当我在地址栏中键入 lang 参数时它不起作用。固定 en.json 工作

https://vue-i18n.intlify.dev/installation.html

app.js

import {createApp} from 'vue';
import App from './App.vue'
import i18n from './i18n';
import WebsiteRouter from './Website/router';
axios.defaults.withCredentials = true;

createApp(App)
    .use(WebsiteRouter)
    .use(i18n)
    .mount("#app");

/router/index.js

import {createRouter, createWebHistory} from 'vue-router'
import i18n from "../../i18n";
import routes from './routes'


const router = createRouter({
    history: createWebHistory(),
    routes
})

router.beforeEach((to, from, next) => {

    let language = to.params.lang;
    if (!language) {
        language = 'en'
    }
    i18n.locale = language
    next()
})

export default router;

routes.js

import i18n from "../../i18n";

export default [
    {
        path: '/',
        redirect: `/${i18n.locale}`
    },
    {
        path: '/:lang',
        component: {
            render (c) { return c('router-view') }
        },
        children: [
            {
                path: '/',
                name: 'home',
                component: () => import('../Views/Home.vue'),
            },
            {
                path: '/about',
                name: 'about',
                component: () => import('../Views/About.vue'),
            },
            {
                path: '/contact',
                name: 'contact',
                component: () => import('../Views/Contact.vue'),
            }
        ]
    }
];

Answer 1

尝试使用

redirect: `/${i18n.globale.locale}`

用于 routes.js

中的重定向

您也可以尝试替换：

i18n.locale = language

至：

i18n.globale.locale = language

在你里面router.beforeEach

干杯:)

vue3 i18n 未定义语言环境

vue3 i18n undefined locale

i18next

vuejs3