perf[i18n]: direct use $t

README.md

@@ -48,7 +48,7 @@
 
  **本项目并不是一个脚手架，更倾向于是一个集成解决方案**
 
- **该项目不支持低版本游览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
+ **该项目不支持低版本浏览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
 
  <p align="center">
   <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">

src/lang/en.js

@@ -66,8 +66,8 @@ export default {
     github: 'Github Repository'
   },
   permission: {
-    permissions: 'Your permissions',
+    roles: 'Your roles',
-    switchPermissions: 'Switch permissions'
+    switchRoles: 'Switch roles'
   },
   components: {
     documentation: 'Documentation',

src/lang/zh.js

@@ -66,8 +66,8 @@ export default {
     github: 'Github 地址'
   },
   permission: {
-    permissions: '你的权限',
+    roles: '你的权限',
-    switchPermissions: '切换权限'
+    switchRoles: '切换权限'
   },
   components: {
     documentation: '文档',

src/router/index.js

@@ -9,6 +9,10 @@ Vue.use(Router)
 /* Layout */
 import Layout from '../views/layout/Layout'
 
+/** note: submenu only apppear when children.length>=1
+*   detail see  https://panjiachen.github.io/vue-element-admin-site/#/router-and-nav?id=sidebar
+**/
+
 /**
 * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
 * redirect: noredirect           if `redirect:noredirect` will no redirct in the breadcrumb

src/utils/i18n.js

@@ -1,4 +1,4 @@
-// translate router.meta.title , be used in breadcrumb sidebar tagsview
+// translate router.meta.title, be used in breadcrumb sidebar tagsview
 export function generateTitle(title) {
-  return this.$t('route.' + title) // $t :this method from vue-i18n ,inject in @/lang/index.js
+  return this.$t('route.' + title) // $t :this method from vue-i18n, inject in @/lang/index.js
 }

src/views/documentation/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container documentation-container">
-    <a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/#/">{{translateKey('documentation')}}</a>
+    <a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/#/">{{$t('documentation.documentation')}}</a>
-    <a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">{{translateKey('github')}}</a>
+    <a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">{{$t('documentation.github')}}</a>
     <dropdown-menu style="float:left;margin-left:50px;" title='系列文章' :items='articleList'></dropdown-menu>
   </div>
 </template>
@@ -22,11 +22,6 @@ export default {
         { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/https://segmentfault.com/a/1190000012213278' }
       ]
     }
-  },
-  methods: {
-    translateKey(key) {
-      return this.$t('documentation.' + key)
-    }
   }
 }
 </script>

src/views/layout/components/Navbar.vue

@@ -7,13 +7,13 @@
     <div class="right-menu">
       <error-log class="errLog-container right-menu-item"></error-log>
 
-      <el-tooltip effect="dark" :content="translateKey('screenfull')" placement="bottom">
+      <el-tooltip effect="dark" :content="$t('navbar.screenfull')" placement="bottom">
         <screenfull class="screenfull right-menu-item"></screenfull>
       </el-tooltip>
 
       <lang-select class="international right-menu-item"></lang-select>
 
-      <el-tooltip effect="dark" :content="translateKey('theme')" placement="bottom">
+      <el-tooltip effect="dark" :content="$t('navbar.theme')" placement="bottom">
         <theme-picker class="theme-switch right-menu-item"></theme-picker>
       </el-tooltip>
 
@@ -25,16 +25,16 @@
         <el-dropdown-menu slot="dropdown">
           <router-link to="/">
             <el-dropdown-item>
-              {{translateKey('dashboard')}}
+              {{$t('navbar.dashboard')}}
             </el-dropdown-item>
           </router-link>
           <a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
             <el-dropdown-item>
-              {{translateKey('github')}}
+              {{$t('navbar.github')}}
             </el-dropdown-item>
           </a>
           <el-dropdown-item divided>
-            <span @click="logout" style="display:block;">{{translateKey('logOut')}}</span>
+            <span @click="logout" style="display:block;">{{$t('navbar.logOut')}}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -75,9 +75,6 @@ export default {
       this.$store.dispatch('LogOut').then(() => {
         location.reload()// 为了重新实例化vue-router对象 避免bug
       })
-    },
-    translateKey(key) {
-      return this.$t('navbar.' + key)
     }
   }
 }

src/views/login/index.vue

@@ -2,7 +2,7 @@
   <div class="login-container">
     <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
       <div class="title-container">
-        <h3 class="title">{{ translateKey('title')}}</h3>
+        <h3 class="title">{{$t('login.title')}}</h3>
         <lang-select class="set-language"></lang-select>
       </div>
       <el-form-item prop="username">
@@ -23,22 +23,22 @@
         </span>
       </el-form-item>
 
-      <el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">{{translateKey('logIn')}}</el-button>
+      <el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">{{$t('login.logIn')}}</el-button>
 
       <div class="tips">
-        <span>{{translateKey('username')}} : admin</span>
+        <span>{{$t('login.username')}} : admin</span>
-        <span>{{translateKey('password')}} : {{translateKey('any')}}</span>
+        <span>{{$t('login.password')}} : {{$t('login.any')}}</span>
       </div>
       <div class="tips">
-        <span>{{translateKey('username')}} : editor </span>
+        <span>{{$t('login.username')}} : editor </span>
-        <span>{{translateKey('password')}} : {{translateKey('any')}}</span>
+        <span>{{$t('login.password')}} : {{$t('login.any')}}</span>
       </div>
 
-      <el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{translateKey('thirdparty')}}</el-button>
+      <el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{$t('login.thirdparty')}}</el-button>
     </el-form>
 
-    <el-dialog :title="translateKey('thirdparty')" :visible.sync="showDialog">
+    <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
-      {{translateKey('thirdpartyTips')}}
+      {{$t('login.thirdpartyTips')}}
       <br/>
       <br/>
       <br/>
@@ -86,9 +86,6 @@ export default {
     }
   },
   methods: {
-    translateKey(key) {
-      return this.$t('login.' + key)
-    },
     showPwd() {
       if (this.pwdType === 'password') {
         this.pwdType = ''

src/views/permission/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
-    <div style="margin-bottom:15px;">{{translateKey('permissions')}}： {{roles}}</div>
+    <div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
-    {{translateKey('switchPermissions')}}：
+    {{$t('permission.switchRoles')}}：
     <el-radio-group v-model="role">
       <el-radio-button label="editor"></el-radio-button>
     </el-radio-group>
@@ -29,11 +29,6 @@ export default{
         this.$router.push({ path: '/permission/index?' + +new Date() })
       })
     }
-  },
-  methods: {
-    translateKey(key) {
-      return this.$t('permission.' + key)
-    }
   }
 }
 </script>