feature: change page title when route change (#1910)

This commit is contained in:
非空 2019-04-15 11:58:43 +08:00 committed by 花裤衩
parent 14580da5b3
commit 26d0f40df2
6 changed files with 37 additions and 10 deletions

View File

@ -11,16 +11,26 @@
const version = require('element-ui/package.json').version // element-ui version from node_modules const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color const ORIGINAL_THEME = '#409EFF' // default color
import defaultSettings from '@/settings'
export default { export default {
data() { data() {
return { return {
chalk: '', // content of theme-chalk css chalk: '', // content of theme-chalk css
theme: defaultSettings.theme theme: ''
}
},
computed: {
defaultTheme() {
return this.$store.state.settings.theme
} }
}, },
watch: { watch: {
defaultTheme: {
handler: function(val, oldVal) {
this.theme = val
},
immediate: true
},
async theme(val) { async theme(val) {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
if (typeof val !== 'string') return if (typeof val !== 'string') return

View File

@ -4,6 +4,7 @@ import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress Configuration NProgress.configure({ showSpinner: false }) // NProgress Configuration
@ -13,6 +14,9 @@ router.beforeEach(async(to, from, next) => {
// start progress bar // start progress bar
NProgress.start() NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in // determine whether the user has logged in
const hasToken = getToken() const hasToken = getToken()

View File

@ -1,7 +1,5 @@
import variables from '@/styles/element-variables.scss' module.exports = {
title: 'Vue Element Admin',
export default {
theme: variables.theme,
/** /**
* @type {boolean} true | false * @type {boolean} true | false

View File

@ -1,8 +1,10 @@
import variables from '@/styles/element-variables.scss'
import defaultSettings from '@/settings' import defaultSettings from '@/settings'
const { showSettings, tagsView, fixedHeader, sidebarLogo, theme } = defaultSettings
const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
const state = { const state = {
theme: theme, theme: variables.theme,
showSettings: showSettings, showSettings: showSettings,
tagsView: tagsView, tagsView: tagsView,
fixedHeader: fixedHeader, fixedHeader: fixedHeader,

View File

@ -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}`
}

View File

@ -1,12 +1,12 @@
'use strict' 'use strict'
const path = require('path') const path = require('path')
const pkg = require('./package.json') const defaultSettings = require('./src/settings.js')
function resolve(dir) { function resolve(dir) {
return path.join(__dirname, 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 const port = 9527 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/ // All configuration item explanations can be find in https://cli.vuejs.org/config/