feat: add dynamic title form HTML; :star2: #97 新增：增加动态 HTML 标题；

iczer

2020-08-05 48bb1c4bb1339299775adffeb1f1eee00bd1b206

feat: add dynamic title form HTML; :star2: #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 @@
    }
  },
  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() {
@@ -32,6 +33,9 @@
    },
    lang(val) {
      this.setLanguage(val)
    },
    $route() {
      this.setHtmlTitle()
    },
    'theme.mode': function(val) {
      let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
@@ -71,7 +75,12 @@
          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 @@
}

/**
 * 格式化 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 @@
      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)
  }
}