chore: modify the i18n implementation logic of PageLayout component 🌟

src/components/menu/menu.js

@@ -3,7 +3,7 @@
  * menuOptions示例：
  * [
  *  {
- *    title: '菜单标题',
+ *    name: '菜单名称',
  *    path: '菜单路由',
  *    meta: {
  *      icon: '菜单图标',
@@ -12,7 +12,7 @@
  *    children: [子菜单配置]
  *  },
  *  {
- *    title: '菜单标题',
+ *    name: '菜单名称',
  *    path: '菜单路由',
  *    meta: {
  *      icon: '菜单图标',
@@ -37,8 +37,6 @@ const {Item, SubMenu} = Menu
 
 export default {
   name: 'IMenu',
-  i18n: {
-  },
   props: {
     options: {
       type: Array,

src/components/page/PageHeader.vue

@@ -3,9 +3,8 @@
     <div :class="['page-header-wide', layout]">
       <div class="breadcrumb">
         <a-breadcrumb>
-          <a-breadcrumb-item :key="item.path" v-for="(item, index) in breadcrumb">
+          <a-breadcrumb-item :key="index" v-for="(item, index) in breadcrumb">
-            <span v-if="index === 0"><a href="#/dashboard/workplace">{{$t('home.name')}}</a></span>
+            <span>{{item}}</span>
-            <span v-else>{{$t(item.path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name')}}</span>
           </a-breadcrumb-item>
         </a-breadcrumb>
       </div>
@@ -48,13 +47,6 @@ export default {
       type: String,
       required: false
     },
-    i18n: Object
-  },
-  created() {
-    let i18n = this.i18n
-    Object.keys(i18n).forEach(key => {
-      this.$i18n.mergeLocaleMessage(key, i18n[key])
-    })
   },
   computed: {
     layout () {

src/layouts/PageLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-layout">
-    <page-header :i18n="routesI18n" :breadcrumb="breadcrumb" :title="title" :logo="logo" :avatar="avatar">
+    <page-header :i18n="routesI18n" :breadcrumb="breadcrumb" :title="pageTitle" :logo="logo" :avatar="avatar">
       <slot name="action"  slot="action"></slot>
       <slot slot="content" name="headerContent"></slot>
       <div slot="content" v-if="!this.$slots.headerContent && desc">
@@ -28,22 +28,55 @@ export default {
   props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
   data () {
     return {
-      breadcrumb: []
+      page: {}
     }
   },
-  computed: {
+  watch: {
-    ...mapState('setting', ['layout', 'routesI18n'])
+    $route() {
+      this.page = this.$route.meta.page
+    }
   },
-  created () {
+  created() {
-    this.getBreadcrumb()
+    let i18n = this.routesI18n
+    Object.keys(i18n).forEach(key => {
+      this.$i18n.mergeLocaleMessage(key, i18n[key])
+    })
+    this.page = this.$route.meta.page
   },
-  updated () {
+  computed: {
-    this.getBreadcrumb()
+    ...mapState('setting', ['layout', 'routesI18n']),
+    pageTitle() {
+      let pageTitle = this.page && this.page.title
+      return this.title || this.$t(pageTitle) || this.routeName
+    },
+    routeName() {
+      return this.$t(this.$route.path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name')
+    },
+    breadcrumb() {
+      let page = this.page
+      let breadcrumb = page && page.breadcrumb
+      if (breadcrumb) {
+        let i18nBreadcrumb = []
+        breadcrumb.forEach(item => {
+          i18nBreadcrumb.push(this.$t(item))
+        })
+        return i18nBreadcrumb
+      } else {
+        return this.getRouteBreadcrumb()
+      }
+    }
   },
   methods: {
-    getBreadcrumb () {
+    getRouteBreadcrumb() {
-      this.breadcrumb = this.$route.matched
+      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'))
+      })
+      return breadcrumb
+    }
   }
 }
 </script>

src/layouts/PageView.vue

@@ -1,5 +1,5 @@
 <template>
-  <page-layout :desc="desc" :title="title" :linkList="linkList">
+  <page-layout :desc="desc" :linkList="linkList">
     <div v-if="this.extraImage && !isMobile" slot="extra" class="extraImg">
       <img :src="extraImage"/>
     </div>
@@ -22,41 +22,26 @@ export default {
   components: {PageToggleTransition, PageLayout},
   data () {
     return {
-      path: '',
+      page: {}
-      desc: '',
-      linkList: [],
-      extraImage: ''
     }
   },
   computed: {
-    title() {
+    ...mapState('setting', ['isMobile', 'multiPage', 'animate', 'routesI18n']),
-      let key = this.path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name'
+    desc() {
-      return this.$t(key)
+      return this.page.desc
     },
-    ...mapState('setting', ['isMobile', 'multiPage', 'animate', 'routesI18n'])
+    linkList() {
-  },
+      return this.page.linkList
-  created() {
+    },
-    let i18n = this.routesI18n
+    extraImage() {
-    Object.keys(i18n).forEach(key => {
+      return this.page.extraImage
-      this.$i18n.mergeLocaleMessage(key, i18n[key])
+    }
-    })
   },
   mounted () {
-    this.getPageHeaderInfo()
+    this.page = this.$refs.page
   },
   updated () {
-    this.getPageHeaderInfo()
+    this.page = this.$refs.page
-  },
-  methods: {
-    getPageHeaderInfo () {
-      this.path = this.$route.path
-      const page = this.$refs.page
-      if (page) {
-        this.desc = page.desc
-        this.linkList = page.linkList
-        this.extraImage = page.extraImage
-      }
-    }
   }
 }
 </script>

src/router/index.js

@@ -12,8 +12,7 @@ export default new Router({
     {
       path: '/login',
       name: '登录页',
-      component: Login,
+      component: Login
-      invisible: true
     },
     {
       path: '/',