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