fix: 静态路由菜单国际化/切换刷新

src/hooks/useI18n.ts

@@ -16,6 +16,7 @@ export default function useLocale() {
   const changeLocale = (value: string) => {
     i18n.locale.value = value;
     localSet(CACHE_LOCAL_I18N, value);
+    window.location.reload()
   };
 
   return {

src/i18n/locales/en-US.ts

@@ -121,6 +121,16 @@ export default {
     }
   },
 
+  // 静态路由
+  router: {
+    index: "Home",
+    account: {
+      index: "Personal Center",
+      profile: "Personal Info",
+      settings: "Personal Settings",
+    },
+  },
+
   // 校验
   valid: {
     userNameReg: 'The account cannot start with a number and can contain uppercase and lowercase letters, numbers, and no less than 5 digits.',

src/i18n/locales/zh-CN.ts

@@ -121,6 +121,16 @@ export default {
     }
   },
 
+  // 静态路由
+  router: {
+    index: "Home",
+    account: {
+      index: "个人中心",
+      profile: "个人信息",
+      settings: "个人设置",
+    },
+  },
+
   // 校验
   valid: {
     userNameReg: '账号不能以数字开头，可包含大写小写字母，数字，且不少于5位',

src/layouts/BasicLayout.vue

@@ -85,7 +85,7 @@ const breadcrumb = computed(() => {
     .map(item => {
       return {
         path: item.path,
-        breadcrumbName: item.meta.title || '-',
+        breadcrumbName: fnLocale(item.meta.title || '-'),
       };
     });
 });
@@ -120,6 +120,16 @@ function fnComponentSetName(component: any, to: any) {
 // 清空导航栏标签
 tabsStore.clear();
 
+/**
+ * 国际化翻译转换
+ */
+function fnLocale(title: string) {
+  if (title.indexOf('router.') !== -1) {
+    title = t(title);
+  }
+  return title;
+}
+
 //
 onMounted(() => {
   // fnGetServerTime();
@@ -186,6 +196,7 @@ document.addEventListener('visibilitychange', function () {
       v-bind="proConfig"
       :iconfont-url="scriptUrl"
       :sider-width="208"
+      :locale="(fnLocale as any)"
     >
       <!--插槽-菜单头-->
       <template #menuHeaderRender>

src/layouts/components/Tabs.vue

@@ -92,6 +92,16 @@ function fnTabClose(path: string) {
   router.push(to);
 }
 
+/**
+ * 国际化翻译转换
+ */
+ function fnLocale(title: string) {
+  if (title.indexOf('router.') !== -1) {
+    title = t(title);
+  }
+  return title;
+}
+
 /**监听当前路由添加到导航标签列表 */
 watch(router.currentRoute, v => tabsStore.tabOpen(v), { immediate: true });
 </script>
@@ -120,7 +130,7 @@ watch(router.currentRoute, v => tabsStore.tabOpen(v), { immediate: true });
         <template #tab>
           <span>
             <IconFont :type="tab.icon" style="margin: 0"></IconFont>
-            {{ tab.title }}
+            {{ fnLocale(tab.title) }}
           </span>
         </template>
       </a-tab-pane>

src/router/index.ts

@@ -28,21 +28,20 @@ const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'Root',
-    meta: { title: '根节点' },
     component: BasicLayout,
     redirect: '/index',
     children: [
       {
         path: '/index',
         name: 'Index',
-        meta: { title: '首页', icon: 'icon-pcduan' },
+        meta: { title: 'router.index', icon: 'icon-pcduan' },
         component: () => import('@/views/index.vue'),
       },
       {
         path: '/account',
         name: 'Account',
         meta: {
-          title: '个人中心',
+          title: 'router.account.index',
           hideInMenu: true,
         },
         component: BlankLayout,
@@ -51,13 +50,13 @@ const constantRoutes: RouteRecordRaw[] = [
           {
             path: 'profile',
             name: 'Profile',
-            meta: { title: '个人信息', cache: true },
+            meta: { title: 'router.account.profile', cache: true },
             component: () => import('@/views/account/profile.vue'),
           },
           {
             path: 'settings',
             name: 'Settings',
-            meta: { title: '个人设置', cache: true },
+            meta: { title: 'router.account.settings', cache: true },
             component: () => import('@/views/account/settings.vue'),
           },
         ],
@@ -67,25 +66,21 @@ const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/login',
     name: 'Login',
-    meta: { title: '登录' },
     component: () => import('@/views/login.vue'),
   },
   {
     path: '/register',
     name: 'Register',
-    meta: { title: '注册' },
     component: () => import('@/views/register.vue'),
   },
   {
     path: '/403',
     name: 'NotPermission',
-    meta: { title: '没有访问权限' },
     component: () => import('@/views/error/403.vue'),
   },
   {
     path: '/redirect',
     name: 'Redirect',
-    meta: { title: '重定向' },
     component: BasicLayout,
     children: [
       {
@@ -96,7 +91,6 @@ const constantRoutes: RouteRecordRaw[] = [
   },
   {
     path: '/:pathMatch(.*)*',
-    meta: { title: '找不到匹配页面' },
     component: () => import('@/views/error/404.vue'),
   },
 ];