From b796a4c9e4398f998b86001a253874ff05f4627c Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Tue, 4 Aug 2020 11:30:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20i18n=20problem=20of=20dynamic=20route;?=
 =?UTF-8?q?=20:bug:=20=E4=BF=AE=E5=A4=8D=EF=BC=9A=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E7=9A=84=E5=9B=BD=E9=99=85=E5=8C=96=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/menu.js   |  5 +++--
 src/layouts/PageLayout.vue    | 10 ++++++----
 src/layouts/tabs/TabsView.vue |  7 ++++---
 src/utils/i18n.js             | 16 +++++++++-------
 src/utils/routerUtil.js       | 13 ++++++++++++-
 5 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js
index 309c897..dd60a93 100644
--- a/src/components/menu/menu.js
+++ b/src/components/menu/menu.js
@@ -34,6 +34,7 @@
 import Menu from 'ant-design-vue/es/menu'
 import Icon from 'ant-design-vue/es/icon'
 import fastEqual from 'fast-deep-equal'
+import {getI18nKey} from '@/utils/routerUtil'
 
 const {Item, SubMenu} = Menu
 
@@ -115,7 +116,7 @@ export default {
           h('router-link', {props: {to: menu.fullPath}},
             [
               this.renderIcon(h, menu.meta ? menu.meta.icon : 'none'),
-              h('span', [this.$t(menu.fullPath.substring(1).replace(new RegExp('/', 'g'), '.') + '.name')])
+              h('span', [this.$t(getI18nKey(menu.fullPath))])
             ]
           )
         ]
@@ -126,7 +127,7 @@ export default {
       let subItem = [h('span', {slot: 'title'},
         [
           this.renderIcon(h, menu.meta ? menu.meta.icon : 'none'),
-          h('span', [this.$t(menu.fullPath.substring(1).replace(new RegExp('/', 'g'), '.') + '.name')])
+          h('span', [this.$t(getI18nKey(menu.fullPath))])
         ]
       )]
       let itemArr = []
diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue
index d429885..5a33311 100644
--- a/src/layouts/PageLayout.vue
+++ b/src/layouts/PageLayout.vue
@@ -22,6 +22,8 @@
 <script>
 import PageHeader from '@/components/page/header/PageHeader'
 import {mapState, mapMutations} from 'vuex'
+import {getI18nKey} from '@/utils/routerUtil'
+
 export default {
   name: 'PageLayout',
   components: {PageHeader},
@@ -64,7 +66,8 @@ export default {
       return this.title || this.$t(pageTitle) || this.routeName
     },
     routeName() {
-      return this.$t(this.$route.path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name')
+      const route = this.$route
+      return this.$t(getI18nKey(route.matched[route.matched.length - 1].path))
     },
     breadcrumb() {
       let page = this.page
@@ -89,9 +92,8 @@ export default {
       let routes = this.$route.matched
       let breadcrumb = []
       routes.forEach(route => {
-        let path = route.path
-        let key = path.length == 0 ? '/home' : path
-        breadcrumb.push(this.$t(key.substring(1).replace(new RegExp('/', 'g'), '.') + '.name'))
+        const path = route.path.length === 0 ? '/home' : route.path
+        breadcrumb.push(this.$t(getI18nKey(path)))
       })
       return breadcrumb
     },
diff --git a/src/layouts/tabs/TabsView.vue b/src/layouts/tabs/TabsView.vue
index 0cc01ae..adfa1a2 100644
--- a/src/layouts/tabs/TabsView.vue
+++ b/src/layouts/tabs/TabsView.vue
@@ -12,7 +12,7 @@
       @contextmenu="onContextmenu"
     >
       <a-tab-pane :key="page.fullPath" v-for="page in pageList">
-        <span slot="tab" :pagekey="page.fullPath">{{pageName(page.path)}}</span>
+        <span slot="tab" :pagekey="page.fullPath">{{pageName(page)}}</span>
       </a-tab-pane>
     </a-tabs>
     <div class="tabs-view-content" :style="`margin-top: ${multiPage ? -24 : 0}px`">
@@ -31,6 +31,7 @@ import AdminLayout from '@/layouts/AdminLayout'
 import Contextmenu from '@/components/menu/Contextmenu'
 import PageToggleTransition from '@/components/transition/PageToggleTransition'
 import {mapState, mapMutations} from 'vuex'
+import {getI18nKey} from '@/utils/routerUtil'
 
 export default {
   name: 'TabsView',
@@ -176,8 +177,8 @@ export default {
         this.setDustbins(this.dustbins.filter(item => item !== componentName))
       }
     },
-    pageName(path) {
-      return this.$t(path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name')
+    pageName(page) {
+      return this.$t(getI18nKey(page.matched[page.matched.length - 1].path))
     },
     ...mapMutations('setting', ['setDustbins', 'correctPageMinHeight'])
   }
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
index 64e93a2..88ad833 100644
--- a/src/utils/i18n.js
+++ b/src/utils/i18n.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import routesI18n from '@/router/i18n'
 import './Objects'
+import {getI18nKey} from '@/utils/routerUtil'
 
 /**
  * 创建 i18n 配置
@@ -23,16 +24,17 @@ function initI18n(locale, fallback) {
 /**
  * 根据 router options 配置生成 国际化语言
  * @param lang
- * @param options
+ * @param routes
  * @param valueKey
  * @returns {*}
  */
-function generateI18n(lang, options, valueKey) {
-  options.forEach(menu => {
-    let keys = menu.fullPath.substring(1).split('/').concat('name')
-    lang.assignProps(keys, menu[valueKey])
-    if (menu.children) {
-      generateI18n(lang, menu.children, valueKey)
+function generateI18n(lang, routes, valueKey) {
+  routes.forEach(route => {
+    let keys = getI18nKey(route.fullPath).split('.')
+    let value = valueKey === 'path' ? route[valueKey].split('/').filter(item => !item.startsWith(':') && item != '').join('.') : route[valueKey]
+    lang.assignProps(keys, value)
+    if (route.children) {
+      generateI18n(lang, route.children, valueKey)
     }
   })
   return lang
diff --git a/src/utils/routerUtil.js b/src/utils/routerUtil.js
index d5940c2..eaacaa3 100644
--- a/src/utils/routerUtil.js
+++ b/src/utils/routerUtil.js
@@ -185,4 +185,15 @@ function formatAuthority(routes) {
   })
 }
 
-export {parseRoutes, loadRoutes, loginGuard, authorityGuard, formatAuthority}
+/**
+ * 从路由 path 解析 i18n key
+ * @param path
+ * @returns {*}
+ */
+function getI18nKey(path) {
+  const keys = path.split('/').filter(item => !item.startsWith(':') && item != '')
+  keys.push('name')
+  return keys.join('.')
+}
+
+export {parseRoutes, loadRoutes, loginGuard, authorityGuard, formatAuthority, getI18nKey}