切换 SPA 路由时如何动态修改页面 title

在单页应用（SPA）中，页面路由的切换是非常常见的操作。当路由发生变化时，我们往往需要根据当前路由动态修改页面的 title，以便于用户在浏览器标签页中更好地识别当前页面。本文将介绍在 SPA 中如何动态修改页面 title，并提供示例代码进行演示。

为什么要动态修改页面 title

在传统的多页应用中，每个页面都有自己的 title，而在 SPA 中，所有的页面都在同一个页面中展示，因此需要动态修改页面的 title。一个好的页面 title 可以让用户更好地了解当前页面的内容，也可以提高网站的 SEO。在 SPA 中，我们可以根据当前路由的不同动态修改页面的 title，以便于用户更好地识别当前页面。

如何动态修改页面 title

在 SPA 中，我们可以通过修改文档对象的 title 属性来动态修改页面的 title。下面是一个简单的示例代码：

document.title = '新的页面 title';

在实际应用中，我们往往需要根据当前路由的不同动态修改页面的 title。下面是一个使用 React Router 的示例代码：

// javascriptcn.com 代码示例
import { Route } from 'react-router-dom';

<Route
  path="/about"
  render={() => {
    document.title = '关于我们 - 我们的公司';
    return <About />;
  }}
/>

在上面的代码中，当路由为 /about 时，我们会将页面的 title 修改为“关于我们 - 我们的公司”。

总结

在 SPA 中动态修改页面 title 是一个常见的需求，通过修改文档对象的 title 属性可以实现这一功能。在实际应用中，我们可以根据当前路由的不同动态修改页面的 title，以便于用户更好地识别当前页面。希望本文能够帮助读者更好地理解如何动态修改页面 title。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65715d0fd2f5e1655da09d32