documentTitlePlugin - 动态页面标题

什么是 documentTitlePlugin？

documentTitlePlugin 是一个用于动态设置页面标题的插件。它会根据当前访问的页面自动更新浏览器标签页的标题，让用户能够清楚地知道当前在哪个页面。

启用插件

import { createRouter, documentTitlePlugin } from '@pro/router'

const router = createRouter({
  // ... 其他配置
  plugins: [
    documentTitlePlugin()
  ]
})

在路由中配置

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: {
      title: '仪表盘' // 当访问该路由时，这个标题会自动显示在页面标题中
    }
  },
  {
    path: '/users',
    component: Users,
    meta: {
      title: '用户管理'
    }
  }
]

插件配置选项

选项	类型	默认值	说明
resolveTitle	(route) => string	-	选填，可以二次处理标题，返回的结果会作为页面标题，比如支持国际化

自定义动态标题

documentTitlePlugin({
  resolveTitle: (route) => {
    if(route.meta?.title){
      return `${route.meta.title} - Naive UI Pro`
    }
    return 'Naive UI Pro'
  }
})