在多页面应用中,如何用 JavaScript 统一管理网页标题

最基本的方法是直接使用 document.title 属性来设置网页标题。在页面载入时,可以根据当前页面的内容设置合适的标题。例如:

document.title = '首页';

为更灵活地管理标题,可以创建一个专门的标题管理模块。该模块可以封装标题设置的逻辑,并提供统一的 API 供其他模块调用。例如:

// 标题管理模块
const titleManager = {
  setTitle(title) {
    document.title = title;
  }
};

// 在其他模块中使用
titleManager.setTitle('产品列表');

应用使用路由管理器(如 React Router、Vue Router 等),可以在路由切换时自动更新标题。可以在路由配置中添加标题信息,并在路由切换时更新 document.title。例如:

// 路由配置
const routes = [
  { path: '/', title: '首页' },
  { path: '/products', title: '产品列表' },
  { path: '/about', title: '关于我们' }
];

// 路由切换时更新标题
router.afterEach((to) => {
  document.title = to.title;
});

通过以上方法,可以在多页面应用中统一管理网页标题,提升用户体验。