config/index.js添加配置浏览器标签显示的基本标题title的配置，会拼接为 '${title} - ${当前页标题}'

Author: zhigang.li

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>iview-admin</title>
+    <title></title>
   </head>
   <body>
     <noscript>

src/config/index.js

@@ -1,4 +1,8 @@
 export default {
+  /**
+   * @description 配置显示在浏览器标签的title
+   */
+  title: 'iView-admin',
   /**
    * @description token在Cookie中存储的天数，默认1天
    */

src/libs/util.js

@@ -2,11 +2,12 @@ import Cookies from 'js-cookie'
 // cookie保存的天数
 import config from '@/config'
 import { forEach, hasOneOf, objEqual } from '@/libs/tools'
+const { title, cookieExpires, useI18n } = config
 
 export const TOKEN_KEY = 'token'
 
 export const setToken = (token) => {
-  Cookies.set(TOKEN_KEY, token, {expires: config.cookieExpires || 1})
+  Cookies.set(TOKEN_KEY, token, {expires: cookieExpires || 1})
 }
 
 export const getToken = () => {
@@ -95,8 +96,8 @@ export const getRouteTitleHandled = (route) => {
 export const showTitle = (item, vm) => {
   let { title, __titleIsFunction__ } = item.meta
   if (!title) return
-  if (vm.$config.useI18n) {
-    if (title.includes('{{') && title.includes('}}') && vm.$config.useI18n) title = title.replace(/({{[\s\S]+?}})/, (m, str) => str.replace(/{{([\s\S]*)}}/, (m, _) => vm.$t(_.trim())))
+  if (useI18n) {
+    if (title.includes('{{') && title.includes('}}') && useI18n) title = title.replace(/({{[\s\S]+?}})/, (m, str) => str.replace(/{{([\s\S]*)}}/, (m, _) => vm.$t(_.trim())))
     else if (__titleIsFunction__) title = item.meta.title
     else title = vm.$t(item.name)
   } else title = (item.meta && item.meta.title) || item.name
@@ -384,3 +385,15 @@ export const scrollTop = (el, from = 0, to, duration = 500, endCallback) => {
   }
   scroll(from, to, step)
 }
+
+/**
+ * @description 根据当前跳转的路由设置显示在浏览器标签的title
+ * @param {Object} routeItem 路由对象
+ * @param {Object} vm Vue实例
+ */
+export const setTitle = (routeItem, vm) => {
+  const handledRoute = getRouteTitleHandled(routeItem)
+  const pageTitle = showTitle(handledRoute, vm)
+  const resTitle = pageTitle ? `${title} - ${pageTitle}` : title
+  window.document.title = resTitle
+}

src/router/index.js

@@ -3,7 +3,7 @@ import Router from 'vue-router'
 import routes from './routers'
 import store from '@/store'
 import iView from 'iview'
-import { setToken, getToken, canTurnTo } from '@/libs/util'
+import { setToken, getToken, canTurnTo, setTitle } from '@/libs/util'
 import config from '@/config'
 const { homeName } = config
 
@@ -53,6 +53,7 @@ router.beforeEach((to, from, next) => {
 })
 
 router.afterEach(to => {
+  setTitle(to, router.app)
   iView.LoadingBar.finish()
   window.scrollTo(0, 0)
 })