feat: add dynamic title form HTML; 🌟 #97

新增：增加动态 HTML 标题；

src/App.vue

@@ -8,6 +8,7 @@
 import enquireScreen from './utils/device'
 import {mapState} from 'vuex'
 import themeUtil from '@/utils/themeUtil';
+import {getI18nKey} from '@/utils/routerUtil'
 
 export default {
   name: 'App',
@@ -17,10 +18,10 @@ export default {
     }
   },
   created () {
-    let _this = this
+    this.setHtmlTitle()
     this.setLanguage(this.lang)
     enquireScreen(isMobile => {
-      _this.$store.commit('setting/setDevice', isMobile)
+      this.$store.commit('setting/setDevice', isMobile)
     })
   },
   mounted() {
@@ -33,6 +34,9 @@ export default {
     lang(val) {
       this.setLanguage(val)
     },
+    $route() {
+      this.setHtmlTitle()
+    },
     'theme.mode': function(val) {
       let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
       themeUtil.changeThemeColor(this.theme.color, val).then(() => {
@@ -71,7 +75,12 @@ export default {
           this.locale = require('ant-design-vue/es/locale-provider/en_US').default
           break
       }
-    }
+    },
+    setHtmlTitle() {
+      const route = this.$route
+      const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path)
+      document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key)
+    },
   }
 }
 </script>

src/utils/i18n.js

@@ -41,22 +41,27 @@ function generateI18n(lang, routes, valueKey) {
 }
 
 /**
- * 格式化 router options，生成 fullPath
- * @param options
+ * 格式化 router.options.routes，生成 fullPath
+ * @param routes
  * @param parentPath
  */
-function formatOptions(options, parentPath) {
-  options.forEach(route => {
+function formatFullPath(routes, parentPath = '') {
+  routes.forEach(route => {
     let isFullPath = route.path.substring(0, 1) === '/'
-    route.fullPath = isFullPath ? route.path : parentPath + '/' + route.path
+    route.fullPath = isFullPath ? route.path : (parentPath === '/' ? parentPath + route.path : parentPath + '/' + route.path)
     if (route.children) {
-      formatOptions(route.children, route.fullPath)
+      formatFullPath(route.children, route.fullPath)
     }
   })
 }
 
+/**
+ * 从路由提取国际化数据
+ * @param i18n
+ * @param routes
+ */
 function mergeI18nFromRoutes(i18n, routes) {
-  formatOptions(routes, '')
+  formatFullPath(routes)
   const CN = generateI18n(new Object(), routes, 'name')
   const US = generateI18n(new Object(), routes, 'path')
   i18n.mergeLocaleMessage('CN', CN)

src/utils/routerUtil.js

@@ -71,11 +71,12 @@ function loadRoutes({router, store, i18n}, routesConfig) {
       router.addRoutes(finalRoutes)
     }
   }
+  // 提取路由国际化数据
+  mergeI18nFromRoutes(i18n, router.options.routes)
   // 初始化Admin后台菜单数据
   const rootRoute = router.options.routes.find(item => item.path === '/')
   const menuRoutes = rootRoute && rootRoute.children
   if (menuRoutes) {
-    mergeI18nFromRoutes(i18n, menuRoutes)
     store.commit('setting/setMenuData', menuRoutes)
   }
 }