vue+admin: 根据路由动态修改浏览器标签页上的title

在utils文件夹下新建工具函数get-page-title.ts-》在permission.ts的全局路由拦截器中设置document.title = getPageTitle(to.meta.title)即可。（注：setting.ts文件中可设置默认值。）

// setting.ts
interface ISettings {
  title: string // Overrides the default title
  showSettings: boolean // Controls settings panel display
  showTagsView: boolean // Controls tagsview display
  showSidebarLogo: boolean // Controls siderbar logo display
  fixedHeader: boolean // If true, will fix the header component
  errorLog: string[] // The env to enable the errorlog component, default 'production' only
  sidebarTextTheme: boolean // If true, will change active text color for sidebar based on theme
  devServerPort: number // Port number for webpack-dev-server
  mockServerPort: number // Port number for mock server
}

// You can customize below settings :)
const settings: ISettings = {
  title: 'XXX系统',
  showSettings: false,
  showTagsView: true,
  fixedHeader: false,
  showSidebarLogo: true,
  errorLog: ['production'],
  sidebarTextTheme: true,
  devServerPort: 9527,
  mockServerPort: 9528
}

export default settings

// utils/get-page-title.ts
import defaultSettings from '@/settings'
const title = defaultSettings.title || 'Vue Element Admin'
export default function getPageTitle(pageTitle: string) {
  if (pageTitle) {
    return `${pageTitle} - ${title}`
  }
  return `${title}`
}

// permission.ts
...
const whiteList = ['/login', '/auth-redirect']
import getPageTitle from '@/utils/get-page-title'
router.beforeEach(async(to: Route, _: Route, next: any) => {
  NProgress.start()
  document.title = getPageTitle(to.meta.title)  // 根据路由动态修改标题名称。
  if (UserModule.token) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (UserModule.roles.length === 0) {
        // 生成路由菜单
        // if (MenuModule.menuRoutes.length === 0) {
        //   await MenuModule.GetMenuRoutes()
        //   console.log('MenuModule.menuRoutes', MenuModule.menuRoutes)
        // }
        try {
          // 用户信息
          await UserModule.GetUserInfo()
          const roles = UserModule.roles
          PermissionModule.GenerateRoutes(roles)
          router.options.routes = [...MenuModule.menuRoutes, ...PermissionModule.routes]
          router.addRoutes([...MenuModule.menuRoutes, ...PermissionModule.routes])
          console.log('router.options.routes', router.options.routes)
          next({ ...to, replace: true })
        } catch (err) {
          UserModule.ResetToken()
          Message.error(err || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      } else {
        console.log('next', to)
        next()
      }
    }
  } else {
    // Has no token
    if (whiteList.indexOf(to.path) !== -1) {
      // In the free login whitelist, go directly
      next()
    } else {
      // Other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach((to: Route) => {
  NProgress.done()
  document.title = getPageTitle(to.meta.title)
})