diff --git a/src/router/index.js b/src/router/index.js
index a883d398..7ad2d76c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -79,7 +79,7 @@ export const constantRoutes = [
         path: 'dashboard',
         component: () => import('@/views/dashboard/index'),
         name: 'Dashboard',
-        meta: { title: 'dashboard', icon: 'dashboard', noCache: true, affix: true }
+        meta: { title: 'Dashboard', icon: 'dashboard', noCache: true, affix: true }
       }
     ]
   },
@@ -91,7 +91,7 @@ export const constantRoutes = [
         path: 'index',
         component: () => import('@/views/documentation/index'),
         name: 'Documentation',
-        meta: { title: 'documentation', icon: 'documentation', affix: true }
+        meta: { title: 'Documentation', icon: 'documentation', affix: true }
       }
     ]
   },
@@ -104,7 +104,7 @@ export const constantRoutes = [
         path: 'index',
         component: () => import('@/views/guide/index'),
         name: 'Guide',
-        meta: { title: 'guide', icon: 'guide', noCache: true }
+        meta: { title: 'Guide', icon: 'guide', noCache: true }
       }
     ]
   }
@@ -121,7 +121,7 @@ export const asyncRoutes = [
     redirect: '/permission/index',
     alwaysShow: true, // will always show the root menu
     meta: {
-      title: 'permission',
+      title: 'Permission',
       icon: 'lock',
       roles: ['admin', 'editor'] // you can set roles in root nav
     },
@@ -131,7 +131,7 @@ export const asyncRoutes = [
         component: () => import('@/views/permission/page'),
         name: 'PagePermission',
         meta: {
-          title: 'pagePermission',
+          title: 'Page Permission',
           roles: ['admin'] // or you can only set roles in sub nav
         }
       },
@@ -140,7 +140,7 @@ export const asyncRoutes = [
         component: () => import('@/views/permission/directive'),
         name: 'DirectivePermission',
         meta: {
-          title: 'directivePermission'
+          title: 'Directive Permission'
           // if do not set roles, means: this page does not require permission
         }
       },
@@ -149,7 +149,7 @@ export const asyncRoutes = [
         component: () => import('@/views/permission/role'),
         name: 'RolePermission',
         meta: {
-          title: 'rolePermission',
+          title: 'Role Permission',
           roles: ['admin']
         }
       }
@@ -164,7 +164,7 @@ export const asyncRoutes = [
         path: 'index',
         component: () => import('@/views/svg-icons/index'),
         name: 'Icons',
-        meta: { title: 'icons', icon: 'icon', noCache: true }
+        meta: { title: 'Icons', icon: 'icon', noCache: true }
       }
     ]
   },
@@ -181,7 +181,7 @@ export const asyncRoutes = [
     redirect: '/example/list',
     name: 'Example',
     meta: {
-      title: 'example',
+      title: 'Example',
       icon: 'example'
     },
     children: [
@@ -189,20 +189,20 @@ export const asyncRoutes = [
         path: 'create',
         component: () => import('@/views/example/create'),
         name: 'CreateArticle',
-        meta: { title: 'createArticle', icon: 'edit' }
+        meta: { title: 'Create Article', icon: 'edit' }
       },
       {
         path: 'edit/:id(\\d+)',
         component: () => import('@/views/example/edit'),
         name: 'EditArticle',
-        meta: { title: 'editArticle', noCache: true },
+        meta: { title: 'Edit Article', noCache: true },
         hidden: true
       },
       {
         path: 'list',
         component: () => import('@/views/example/list'),
         name: 'ArticleList',
-        meta: { title: 'articleList', icon: 'list' }
+        meta: { title: 'Article List', icon: 'list' }
       }
     ]
   },
@@ -215,7 +215,7 @@ export const asyncRoutes = [
         path: 'index',
         component: () => import('@/views/tab/index'),
         name: 'Tab',
-        meta: { title: 'tab', icon: 'tab' }
+        meta: { title: 'Tab', icon: 'tab' }
       }
     ]
   },
@@ -226,7 +226,7 @@ export const asyncRoutes = [
     redirect: 'noredirect',
     name: 'ErrorPages',
     meta: {
-      title: 'errorPages',
+      title: 'Error Pages',
       icon: '404'
     },
     children: [
@@ -234,13 +234,13 @@ export const asyncRoutes = [
         path: '401',
         component: () => import('@/views/errorPage/401'),
         name: 'Page401',
-        meta: { title: 'page401', noCache: true }
+        meta: { title: '401', noCache: true }
       },
       {
         path: '404',
         component: () => import('@/views/errorPage/404'),
         name: 'Page404',
-        meta: { title: 'page404', noCache: true }
+        meta: { title: '404', noCache: true }
       }
     ]
   },
@@ -254,7 +254,7 @@ export const asyncRoutes = [
         path: 'log',
         component: () => import('@/views/errorLog/index'),
         name: 'ErrorLog',
-        meta: { title: 'errorLog', icon: 'bug' }
+        meta: { title: 'Error Log', icon: 'bug' }
       }
     ]
   },
@@ -265,7 +265,7 @@ export const asyncRoutes = [
     redirect: '/excel/export-excel',
     name: 'Excel',
     meta: {
-      title: 'excel',
+      title: 'Excel',
       icon: 'excel'
     },
     children: [
@@ -273,25 +273,25 @@ export const asyncRoutes = [
         path: 'export-excel',
         component: () => import('@/views/excel/exportExcel'),
         name: 'ExportExcel',
-        meta: { title: 'exportExcel' }
+        meta: { title: 'Export Excel' }
       },
       {
         path: 'export-selected-excel',
         component: () => import('@/views/excel/selectExcel'),
         name: 'SelectExcel',
-        meta: { title: 'selectExcel' }
+        meta: { title: 'Export Selected' }
       },
       {
         path: 'export-merge-header',
         component: () => import('@/views/excel/mergeHeader'),
         name: 'MergeHeader',
-        meta: { title: 'mergeHeader' }
+        meta: { title: 'Merge Header' }
       },
       {
         path: 'upload-excel',
         component: () => import('@/views/excel/uploadExcel'),
         name: 'UploadExcel',
-        meta: { title: 'uploadExcel' }
+        meta: { title: 'Upload Excel' }
       }
     ]
   },
@@ -301,13 +301,13 @@ export const asyncRoutes = [
     component: Layout,
     redirect: '/zip/download',
     alwaysShow: true,
-    meta: { title: 'zip', icon: 'zip' },
+    meta: { title: 'Zip', icon: 'zip' },
     children: [
       {
         path: 'download',
         component: () => import('@/views/zip/index'),
         name: 'ExportZip',
-        meta: { title: 'exportZip' }
+        meta: { title: 'Export Zip' }
       }
     ]
   },
@@ -321,7 +321,7 @@ export const asyncRoutes = [
         path: 'index',
         component: () => import('@/views/pdf/index'),
         name: 'PDF',
-        meta: { title: 'pdf', icon: 'pdf' }
+        meta: { title: 'PDF', icon: 'pdf' }
       }
     ]
   },
@@ -340,7 +340,7 @@ export const asyncRoutes = [
         path: 'index',
         component: () => import('@/views/theme/index'),
         name: 'Theme',
-        meta: { title: 'theme', icon: 'theme' }
+        meta: { title: 'Theme', icon: 'theme' }
       }
     ]
   },
@@ -354,20 +354,7 @@ export const asyncRoutes = [
         path: 'index',
         component: () => import('@/views/clipboard/index'),
         name: 'ClipboardDemo',
-        meta: { title: 'clipboardDemo', icon: 'clipboard' }
-      }
-    ]
-  },
-
-  {
-    path: '/i18n',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/i18n-demo/index'),
-        name: 'I18n',
-        meta: { title: 'i18n', icon: 'international' }
+        meta: { title: 'Clipboard', icon: 'clipboard' }
       }
     ]
   },
@@ -378,7 +365,7 @@ export const asyncRoutes = [
     children: [
       {
         path: 'https://github.com/PanJiaChen/vue-element-admin',
-        meta: { title: 'externalLink', icon: 'link' }
+        meta: { title: 'External Link', icon: 'link' }
       }
     ]
   },
diff --git a/src/router/modules/charts.js b/src/router/modules/charts.js
index 7293490e..49223b1c 100644
--- a/src/router/modules/charts.js
+++ b/src/router/modules/charts.js
@@ -8,7 +8,7 @@ const chartsRouter = {
   redirect: 'noredirect',
   name: 'Charts',
   meta: {
-    title: 'charts',
+    title: 'Charts',
     icon: 'chart'
   },
   children: [
@@ -16,19 +16,19 @@ const chartsRouter = {
       path: 'keyboard',
       component: () => import('@/views/charts/keyboard'),
       name: 'KeyboardChart',
-      meta: { title: 'keyboardChart', noCache: true }
+      meta: { title: 'Keyboard Chart', noCache: true }
     },
     {
       path: 'line',
       component: () => import('@/views/charts/line'),
       name: 'LineChart',
-      meta: { title: 'lineChart', noCache: true }
+      meta: { title: 'Line Chart', noCache: true }
     },
     {
       path: 'mixchart',
       component: () => import('@/views/charts/mixChart'),
       name: 'MixChart',
-      meta: { title: 'mixChart', noCache: true }
+      meta: { title: 'Mix Chart', noCache: true }
     }
   ]
 }
diff --git a/src/router/modules/components.js b/src/router/modules/components.js
index 889c371d..d45e480b 100644
--- a/src/router/modules/components.js
+++ b/src/router/modules/components.js
@@ -8,7 +8,7 @@ const componentsRouter = {
   redirect: 'noredirect',
   name: 'ComponentDemo',
   meta: {
-    title: 'components',
+    title: 'Components',
     icon: 'component'
   },
   children: [
@@ -16,85 +16,85 @@ const componentsRouter = {
       path: 'tinymce',
       component: () => import('@/views/components-demo/tinymce'),
       name: 'TinymceDemo',
-      meta: { title: 'tinymce' }
+      meta: { title: 'Tinymce' }
     },
     {
       path: 'markdown',
       component: () => import('@/views/components-demo/markdown'),
       name: 'MarkdownDemo',
-      meta: { title: 'markdown' }
+      meta: { title: 'Markdown' }
     },
     {
       path: 'json-editor',
       component: () => import('@/views/components-demo/jsonEditor'),
       name: 'JsonEditorDemo',
-      meta: { title: 'jsonEditor' }
+      meta: { title: 'JSON Editor' }
     },
     {
       path: 'splitpane',
       component: () => import('@/views/components-demo/splitpane'),
       name: 'SplitpaneDemo',
-      meta: { title: 'splitPane' }
+      meta: { title: 'SplitPane' }
     },
     {
       path: 'avatar-upload',
       component: () => import('@/views/components-demo/avatarUpload'),
       name: 'AvatarUploadDemo',
-      meta: { title: 'avatarUpload' }
+      meta: { title: 'Upload' }
     },
     {
       path: 'dropzone',
       component: () => import('@/views/components-demo/dropzone'),
       name: 'DropzoneDemo',
-      meta: { title: 'dropzone' }
+      meta: { title: 'Dropzone' }
     },
     {
       path: 'sticky',
       component: () => import('@/views/components-demo/sticky'),
       name: 'StickyDemo',
-      meta: { title: 'sticky' }
+      meta: { title: 'Sticky' }
     },
     {
       path: 'count-to',
       component: () => import('@/views/components-demo/countTo'),
       name: 'CountToDemo',
-      meta: { title: 'countTo' }
+      meta: { title: 'Count To' }
     },
     {
       path: 'mixin',
       component: () => import('@/views/components-demo/mixin'),
       name: 'ComponentMixinDemo',
-      meta: { title: 'componentMixin' }
+      meta: { title: 'Component Mixin' }
     },
     {
       path: 'back-to-top',
       component: () => import('@/views/components-demo/backToTop'),
       name: 'BackToTopDemo',
-      meta: { title: 'backToTop' }
+      meta: { title: 'Back To Top' }
     },
     {
       path: 'drag-dialog',
       component: () => import('@/views/components-demo/dragDialog'),
       name: 'DragDialogDemo',
-      meta: { title: 'dragDialog' }
+      meta: { title: 'Drag Dialog' }
     },
     {
       path: 'drag-select',
       component: () => import('@/views/components-demo/dragSelect'),
       name: 'DragSelectDemo',
-      meta: { title: 'dragSelect' }
+      meta: { title: 'Drag Select' }
     },
     {
       path: 'dnd-list',
       component: () => import('@/views/components-demo/dndList'),
       name: 'DndListDemo',
-      meta: { title: 'dndList' }
+      meta: { title: 'Dnd List' }
     },
     {
       path: 'drag-kanban',
       component: () => import('@/views/components-demo/dragKanban'),
       name: 'DragKanbanDemo',
-      meta: { title: 'dragKanban' }
+      meta: { title: 'Drag Kanban' }
     }
   ]
 }
diff --git a/src/router/modules/nested.js b/src/router/modules/nested.js
index ee165c8c..749bc1cf 100644
--- a/src/router/modules/nested.js
+++ b/src/router/modules/nested.js
@@ -8,7 +8,7 @@ const nestedRouter = {
   redirect: '/nested/menu1/menu1-1',
   name: 'Nested',
   meta: {
-    title: 'nested',
+    title: 'Nested Routes',
     icon: 'nested'
   },
   children: [
@@ -16,33 +16,33 @@ const nestedRouter = {
       path: 'menu1',
       component: () => import('@/views/nested/menu1/index'), // Parent router-view
       name: 'Menu1',
-      meta: { title: 'menu1' },
+      meta: { title: 'Menu 1' },
       redirect: '/nested/menu1/menu1-1',
       children: [
         {
           path: 'menu1-1',
           component: () => import('@/views/nested/menu1/menu1-1'),
           name: 'Menu1-1',
-          meta: { title: 'menu1-1' }
+          meta: { title: 'Menu 1-1' }
         },
         {
           path: 'menu1-2',
           component: () => import('@/views/nested/menu1/menu1-2'),
           name: 'Menu1-2',
           redirect: '/nested/menu1/menu1-2/menu1-2-1',
-          meta: { title: 'menu1-2' },
+          meta: { title: 'Menu 1-2' },
           children: [
             {
               path: 'menu1-2-1',
               component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
               name: 'Menu1-2-1',
-              meta: { title: 'menu1-2-1' }
+              meta: { title: 'Menu 1-2-1' }
             },
             {
               path: 'menu1-2-2',
               component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
               name: 'Menu1-2-2',
-              meta: { title: 'menu1-2-2' }
+              meta: { title: 'Menu 1-2-2' }
             }
           ]
         },
@@ -50,7 +50,7 @@ const nestedRouter = {
           path: 'menu1-3',
           component: () => import('@/views/nested/menu1/menu1-3'),
           name: 'Menu1-3',
-          meta: { title: 'menu1-3' }
+          meta: { title: 'Menu 1-3' }
         }
       ]
     },
@@ -58,7 +58,7 @@ const nestedRouter = {
       path: 'menu2',
       name: 'Menu2',
       component: () => import('@/views/nested/menu2/index'),
-      meta: { title: 'menu2' }
+      meta: { title: 'Menu 2' }
     }
   ]
 }
diff --git a/src/router/modules/table.js b/src/router/modules/table.js
index b54fb42d..00cac1cd 100644
--- a/src/router/modules/table.js
+++ b/src/router/modules/table.js
@@ -16,25 +16,25 @@ const tableRouter = {
       path: 'dynamic-table',
       component: () => import('@/views/table/dynamicTable/index'),
       name: 'DynamicTable',
-      meta: { title: 'dynamicTable' }
+      meta: { title: 'Dynamic Table' }
     },
     {
       path: 'drag-table',
       component: () => import('@/views/table/dragTable'),
       name: 'DragTable',
-      meta: { title: 'dragTable' }
+      meta: { title: 'Drag Table' }
     },
     {
       path: 'inline-edit-table',
       component: () => import('@/views/table/inlineEditTable'),
       name: 'InlineEditTable',
-      meta: { title: 'inlineEditTable' }
+      meta: { title: 'Inline Edit' }
     },
     {
       path: 'complex-table',
       component: () => import('@/views/table/complexTable'),
       name: 'ComplexTable',
-      meta: { title: 'complexTable' }
+      meta: { title: 'Complex Table' }
     }
   ]
 }
diff --git a/src/views/i18n-demo/index.vue b/src/views/i18n-demo/index.vue
deleted file mode 100644
index 60c9a80e..00000000
--- a/src/views/i18n-demo/index.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-  <div>
-    <el-card class="box-card" style="margin-top:40px;">
-      <div slot="header" class="clearfix">
-        <svg-icon icon-class="international" />
-        <span style="margin-left:10px;">{{ $t('i18nView.title') }}</span>
-      </div>
-      <div>
-        <el-radio-group v-model="lang" size="small">
-          <el-radio label="zh" border>
-            简体中文
-          </el-radio>
-          <el-radio label="en" border>
-            English
-          </el-radio>
-          <el-radio label="es" border>
-            Español
-          </el-radio>
-        </el-radio-group>
-        <el-tag style="margin-top:15px;display:block;" type="info">
-          {{ $t('i18nView.note') }}
-        </el-tag>
-      </div>
-    </el-card>
-
-    <el-row :gutter="20" style="margin:100px 15px 50px;">
-      <el-col :span="12" :xs="24">
-        <div class="block">
-          <el-date-picker v-model="date" :placeholder="$t('i18nView.datePlaceholder')" type="date" />
-        </div>
-        <div class="block">
-          <el-select v-model="value" :placeholder="$t('i18nView.selectPlaceholder')">
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </div>
-        <div class="block">
-          <el-button class="item-btn" size="small">
-            {{ $t('i18nView.default') }}
-          </el-button>
-          <el-button class="item-btn" size="small" type="primary">
-            {{ $t('i18nView.primary') }}
-          </el-button>
-          <el-button class="item-btn" size="small" type="success">
-            {{ $t('i18nView.success') }}
-          </el-button>
-          <el-button class="item-btn" size="small" type="info">
-            {{ $t('i18nView.info') }}
-          </el-button>
-          <el-button class="item-btn" size="small" type="warning">
-            {{ $t('i18nView.warning') }}
-          </el-button>
-          <el-button class="item-btn" size="small" type="danger">
-            {{ $t('i18nView.danger') }}
-          </el-button>
-        </div>
-      </el-col>
-      <el-col :span="12" :xs="24">
-        <el-table :data="tableData" fit highlight-current-row border style="width: 100%">
-          <el-table-column :label="$t('i18nView.tableName')" prop="name" width="100" align="center" />
-          <el-table-column :label="$t('i18nView.tableDate')" prop="date" width="120" align="center" />
-          <el-table-column :label="$t('i18nView.tableAddress')" prop="address" />
-        </el-table>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import local from './local'
-const viewName = 'i18nView'
-
-export default {
-  name: 'I18n',
-  data() {
-    return {
-      date: '',
-      tableData: [{
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      },
-      {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      },
-      {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      },
-      {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      }],
-      options: [],
-      value: ''
-    }
-  },
-  computed: {
-    lang: {
-      get() {
-        return this.$store.state.app.language
-      },
-      set(lang) {
-        this.$i18n.locale = lang
-        this.$store.dispatch('app/setLanguage', lang)
-      }
-    }
-  },
-  watch: {
-    lang() {
-      this.setOptions()
-    }
-  },
-  created() {
-    if (!this.$i18n.getLocaleMessage('en')[viewName]) {
-      this.$i18n.mergeLocaleMessage('en', local.en)
-      this.$i18n.mergeLocaleMessage('zh', local.zh)
-      this.$i18n.mergeLocaleMessage('es', local.es)
-    }
-    this.setOptions() // set default select options
-  },
-  methods: {
-    setOptions() {
-      this.options = [
-        {
-          value: '1',
-          label: this.$t('i18nView.one')
-        },
-        {
-          value: '2',
-          label: this.$t('i18nView.two')
-        },
-        {
-          value: '3',
-          label: this.$t('i18nView.three')
-        }
-      ]
-    }
-  }
-}
-</script>
-
-<style scoped>
-.box-card {
-  width: 600px;
-  max-width: 100%;
-  margin: 20px auto;
-}
-.item-btn{
-  margin-bottom: 15px;
-  margin-left: 0px;
-}
-.block {
-  padding: 25px;
-}
-</style>
diff --git a/src/views/i18n-demo/local.js b/src/views/i18n-demo/local.js
deleted file mode 100644
index 9b43e605..00000000
--- a/src/views/i18n-demo/local.js
+++ /dev/null
@@ -1,63 +0,0 @@
-
-export default {
-  zh: {
-    i18nView: {
-      title: '切换语言',
-      note: '本项目国际化基于 vue-i18n',
-      datePlaceholder: '请选择日期',
-      selectPlaceholder: '请选择',
-      tableDate: '日期',
-      tableName: '姓名',
-      tableAddress: '地址',
-      default: '默认按钮',
-      primary: '主要按钮',
-      success: '成功按钮',
-      info: '信息按钮',
-      warning: '警告按钮',
-      danger: '危险按钮',
-      one: '一',
-      two: '二',
-      three: '三'
-    }
-  },
-  en: {
-    i18nView: {
-      title: 'Switch Language',
-      note: 'The internationalization of this project is based on vue-i18n',
-      datePlaceholder: 'Pick a day',
-      selectPlaceholder: 'Select',
-      tableDate: 'tableDate',
-      tableName: 'tableName',
-      tableAddress: 'tableAddress',
-      default: 'default:',
-      primary: 'primary',
-      success: 'success',
-      info: 'info',
-      warning: 'warning',
-      danger: 'danger',
-      one: 'One',
-      two: 'Two',
-      three: 'Three'
-    }
-  },
-  es: {
-    i18nView: {
-      title: 'Switch Language',
-      note: 'The internationalization of this project is based on vue-i18n',
-      datePlaceholder: 'Pick a day',
-      selectPlaceholder: 'Select',
-      tableDate: 'tableDate',
-      tableName: 'tableName',
-      tableAddress: 'tableAddress',
-      default: 'default:',
-      primary: 'primary',
-      success: 'success',
-      info: 'info',
-      warning: 'warning',
-      danger: 'danger',
-      one: 'One',
-      two: 'Two',
-      three: 'Three'
-    }
-  }
-}