vue router中如何使用i18n

1)准备工作

安装插件 => 准备翻译文件 => 全局引用 => 页面局部使用
详见 下链接 [如何在vue3中使用后i18n]

https://blog.csdn.net/weixin_39423672/article/details/118327547?spm=1001.2014.3001.5502

2）router/index.ts

import {
    
     createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    
    
    path: "/login",
    name: "login",
    meta: {
    
    
      isShow: false,
      title:'title'
    },
    component: Home,
  },
 ]

3）menu.vue

   <template v-for="(item, index) in menuItems" :key="index + 'menu'">
      <el-menu-item :index="item.path">
         <span>{
    
    {
    
     i18n.$t(item.meta.title) }}</span>
       </el-menu-item>
   </template >
import {
    
     onMounted, reactive, ref, getCurrentInstance } from 'vue'

import {
    
     useI18n } from "../../i18n/i18nPlugin";

export default {
    
    
  name: 'home',
  setup() {
    
    
    // @ts-ignore：无法被执行的代码的错误
    const {
    
     ctx } = getCurrentInstance();

    const menuItems = router.options.routes.filter(item => item.meta && item.meta.isShow);
    
 	const i18n = useI18n();
	
	return {
    
    
		menuItems,
		i18n,
	}
  }
}