diff --git a/README.md b/README.md
index d4f11fb9..c8428dc0 100644
--- a/README.md
+++ b/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">
diff --git a/src/lang/en.js b/src/lang/en.js
index 3d81875c..358a6e61 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -66,8 +66,8 @@ export default {
     github: 'Github Repository'
   },
   permission: {
-    permissions: 'Your permissions',
-    switchPermissions: 'Switch permissions'
+    roles: 'Your roles',
+    switchRoles: 'Switch roles'
   },
   components: {
     documentation: 'Documentation',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index cff6c72d..54b6141b 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -66,8 +66,8 @@ export default {
     github: 'Github 地址'
   },
   permission: {
-    permissions: '你的权限',
-    switchPermissions: '切换权限'
+    roles: '你的权限',
+    switchRoles: '切换权限'
   },
   components: {
     documentation: '文档',
diff --git a/src/router/index.js b/src/router/index.js
index 26c47f4a..221ec7eb 100644
--- a/src/router/index.js
+++ b/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
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
index 6e4ca145..faa52062 100644
--- a/src/utils/i18n.js
+++ b/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
 }
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
index c4f4b52d..d8381592 100644
--- a/src/views/documentation/index.vue
+++ b/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://github.com/PanJiaChen/vue-element-admin/">{{translateKey('github')}}</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/">{{$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>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index 5776fd8c..d848c6f6 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/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)
     }
   }
 }
diff --git a/src/views/login/authredirect.vue b/src/views/login/authredirect.vue
index f466fff3..7cf37e81 100644
--- a/src/views/login/authredirect.vue
+++ b/src/views/login/authredirect.vue
@@ -1,10 +1,10 @@
 <script>
-    export default {
-      name: 'authredirect',
-      created() {
-        const hash = window.location.search.slice(1)
-        window.opener.location.href = window.location.origin + '/login#' + hash
-        window.close()
-  }
+  export default {
+    name: 'authredirect',
+    created() {
+      const hash = window.location.search.slice(1)
+      window.opener.location.href = window.location.origin + '/login#' + hash
+      window.close()
     }
+  }
 </script>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 72237f31..484c96c0 100644
--- a/src/views/login/index.vue
+++ b/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>{{translateKey('password')}} : {{translateKey('any')}}</span>
+        <span>{{$t('login.username')}} : admin</span>
+        <span>{{$t('login.password')}} : {{$t('login.any')}}</span>
       </div>
       <div class="tips">
-        <span>{{translateKey('username')}} : editor </span>
-        <span>{{translateKey('password')}} : {{translateKey('any')}}</span>
+        <span>{{$t('login.username')}} : editor </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">
-      {{translateKey('thirdpartyTips')}}
+    <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
+      {{$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 = ''
diff --git a/src/views/permission/index.vue b/src/views/permission/index.vue
index f606acc4..73a64e3e 100644
--- a/src/views/permission/index.vue
+++ b/src/views/permission/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
-    <div style="margin-bottom:15px;">{{translateKey('permissions')}}： {{roles}}</div>
-    {{translateKey('switchPermissions')}}：
+    <div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
+    {{$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>