欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue router中如何使用i18n

程序员文章站 2022-05-16 09:34:12
...

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,
	}
  }
}
相关标签: vue3 vue vue.js