router.js 中使用国际化

1、router.js 

import { createRouter, createWebHistory } from 'vue-router';
import { i18n } from '~/locales/index.js'; // 引入 i18n 实例 （自定义的index.js配置）
import UserList from '../pages/user/list.vue'

// 路由配置
const routes = [
  {
    path: "/homeIndex",
    name: "homeIndex",
    component: Home,
    meta: {
      title: "menu.HOME" // 国际化键值
    }
  },
  {
    path: "/user",
    name: "user",
    component: UserList,
    meta: {
      title: "sub_menu.M2_1" // 国际化键值
    }
  }
];

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

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const { t } = i18n.global; // 获取 t 函数
  const title = to.meta.title; // 提取 meta.title

  console.log("to.meta.title:", title); // 调试：确认是否获取到正确的 meta.title
  console.log("Translated title:", t(title)); // 调试：确认翻译是否正确

  if (title) {
    document.title = t(title); // 动态设置页面标题
  }

  next();
});

export default router;

2.国际化index.js

import type { App } from 'vue';
import type { I18n, I18nOptions } from 'vue-i18n';
import zh from './zh.json';  // 自己的json文件
import ko from './en.json';  // 自己的json文件
import { createI18n } from 'vue-i18n';


export let i18n: ReturnType<typeof createI18n>;

async function createI18nOptions(): Promise<I18nOptions> {
const locale = localStorage.getItem('lang') || "en";  // 存本地便于更新切换语言

  let defaultLocal = {};
  if (locale === 'en') {
    defaultLocal = en;
  } else {
    defaultLocal = zh;
  }
  const msg = defaultLocal ?? {};

  return {
    legacy: false,
    locale,
    fallbackLocale: "zh",
    messages: {
      [locale]: msg,
     /*  "zh":{
        message:{
          hello: '确认',
        }
      },
      "en":{
        message:{
          hello: 'ENTER',
        }
      }, */
    },
    availableLocales: ['zh', 'en'],
    sync: true, 
    silentTranslationWarn: true, // true - warning off
    missingWarn: false,
    silentFallbackWarn: true,
  };
}

export async function setupI18n(app: App) {
  const options = await createI18nOptions();
  console.log('setupI18n', options);
  i18n = createI18n(options) as I18n;
  app.use(i18n);
}

 3、mian.js

import { createApp } from 'vue';
import App from './App.vue';
import { router } from './router';
import { setupI18n } from './locales/index';  //自定义的国际化配置文件


const app = createApp(App);
  // 初始化插件
  app.use(store);
  app.use(router);

// 初始化 i18n
await setupI18n(app);


// 挂载应用
app.mount('#app');

4、zh.json    en.json  文件 

// zh.json

{
  "btn": {
    "save": "保存",
    "close": "关闭"
  },
    // 多个对象
}



// en.json
{
  "btn": {
    "save": "save",
    "close": "close"
  },
    // 多个对象
}

5、 切换语言vue文件

<el-dropdown @command="handleLanguageChange"> 
                <div class="el-dropdown-link">
                    {{ currentLanguage }} 
                    <el-icon><Switch /></el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="lang in languages" :key="lang.value"                 
                          :command="lang.value">{{ lang.label }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
</el-dropdown>

const languages = [
    { label: '中文', value: 'zh' },
    { label: 'English', value: 'en' },
];
const currentValue = ref(localStorage.getItem('lang') || 'en');
const currentLanguage = ref(languages.find(item => item.value === currentValue.value)?.label);

// 切换语言
const handleLanguageChange = (lang) => {
    console.log('lang',lang);
    currentLanguage.value = languages.find(item => item.value === lang)?.label || 'English'; 
    localStorage.setItem('lang',lang)
   
    locale.value = lang;
    console.log('lang',locale.value);
    // todo  强制刷新一下本页面
    window.location.reload()
    handleProcStatus
    
};