From 26d0f40df21fa5e5583a20cb3df14ae9d475bb3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=9E=E7=A9=BA?= <ren8179@126.com>
Date: Mon, 15 Apr 2019 11:58:43 +0800
Subject: [PATCH] feature: change page title when route change (#1910)

---
 src/components/ThemePicker/index.vue | 14 ++++++++++++--
 src/permission.js                    |  4 ++++
 src/settings.js                      |  6 ++----
 src/store/modules/settings.js        |  6 ++++--
 src/utils/get-page-title.js          | 13 +++++++++++++
 vue.config.js                        |  4 ++--
 6 files changed, 37 insertions(+), 10 deletions(-)
 create mode 100644 src/utils/get-page-title.js

diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index 0a556248..90c03311 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -11,16 +11,26 @@
 
 const version = require('element-ui/package.json').version // element-ui version from node_modules
 const ORIGINAL_THEME = '#409EFF' // default color
-import defaultSettings from '@/settings'
 
 export default {
   data() {
     return {
       chalk: '', // content of theme-chalk css
-      theme: defaultSettings.theme
+      theme: ''
+    }
+  },
+  computed: {
+    defaultTheme() {
+      return this.$store.state.settings.theme
     }
   },
   watch: {
+    defaultTheme: {
+      handler: function(val, oldVal) {
+        this.theme = val
+      },
+      immediate: true
+    },
     async theme(val) {
       const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
       if (typeof val !== 'string') return
diff --git a/src/permission.js b/src/permission.js
index 7cc2a5cf..750aeab6 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -4,6 +4,7 @@ import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
 import { getToken } from '@/utils/auth' // get token from cookie
+import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
@@ -13,6 +14,9 @@ router.beforeEach(async(to, from, next) => {
   // start progress bar
   NProgress.start()
 
+  // set page title
+  document.title = getPageTitle(to.meta.title)
+
   // determine whether the user has logged in
   const hasToken = getToken()
 
diff --git a/src/settings.js b/src/settings.js
index e7ad4e1d..1ebc7f29 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -1,7 +1,5 @@
-import variables from '@/styles/element-variables.scss'
-
-export default {
-  theme: variables.theme,
+module.exports = {
+  title: 'Vue Element Admin',
 
   /**
    * @type {boolean} true | false
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 8522a5aa..e389af79 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,8 +1,10 @@
+import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
-const { showSettings, tagsView, fixedHeader, sidebarLogo, theme } = defaultSettings
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
-  theme: theme,
+  theme: variables.theme,
   showSettings: showSettings,
   tagsView: tagsView,
   fixedHeader: fixedHeader,
diff --git a/src/utils/get-page-title.js b/src/utils/get-page-title.js
new file mode 100644
index 00000000..4b6604cd
--- /dev/null
+++ b/src/utils/get-page-title.js
@@ -0,0 +1,13 @@
+import defaultSettings from '@/settings'
+import i18n from '@/lang'
+
+const title = defaultSettings.title || 'Vue Element Admin'
+
+export default function getPageTitle(key) {
+  const hasKey = i18n.te(`route.${key}`)
+  if (hasKey) {
+    const pageName = i18n.t(`route.${key}`)
+    return `${pageName} - ${title}`
+  }
+  return `${title}`
+}
diff --git a/vue.config.js b/vue.config.js
index cbd79510..0306b27c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,12 +1,12 @@
 'use strict'
 const path = require('path')
-const pkg = require('./package.json')
+const defaultSettings = require('./src/settings.js')
 
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
-const name = pkg.name || 'vue-element-admin' // page title
+const name = defaultSettings.title || 'vue Element Admin' // page title
 const port = 9527 // dev port
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/