fix: i18n problem of dynamic route; 🐛

修复：动态路由的国际化问题；

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 = []

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
+        const path = route.path.length === 0 ? '/home' : route.path
-        let key = path.length == 0 ? '/home' : path
+        breadcrumb.push(this.$t(getI18nKey(path)))
-        breadcrumb.push(this.$t(key.substring(1).replace(new RegExp('/', 'g'), '.') + '.name'))
       })
       return breadcrumb
     },

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) {
+    pageName(page) {
-      return this.$t(path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name')
+      return this.$t(getI18nKey(page.matched[page.matched.length - 1].path))
     },
     ...mapMutations('setting', ['setDustbins', 'correctPageMinHeight'])
   }

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) {
+function generateI18n(lang, routes, valueKey) {
-  options.forEach(menu => {
+  routes.forEach(route => {
-    let keys = menu.fullPath.substring(1).split('/').concat('name')
+    let keys = getI18nKey(route.fullPath).split('.')
-    lang.assignProps(keys, menu[valueKey])
+    let value = valueKey === 'path' ? route[valueKey].split('/').filter(item => !item.startsWith(':') && item != '').join('.') : route[valueKey]
-    if (menu.children) {
+    lang.assignProps(keys, value)
-      generateI18n(lang, menu.children, valueKey)
+    if (route.children) {
+      generateI18n(lang, route.children, valueKey)
     }
   })
   return lang

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}