How to use i18n in vue router

1) Preparation

Install the plug-in => prepare the translation file => global reference => partial use of the page, see
the link below for details [How to use i18n in vue3]

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,
	}
  }
}