nextjs中router.pathname和router.route的区别

在 Next.js 中，router.pathname 和 router.route 都是与路由系统相关的概念，但它们指向的内容略有不同。

router.pathname

router.pathname 代表的是显示在浏览器地址栏中的路径。它是动态的，会随着你在应用中导航而改变。例如，如果你访问的是 /about 页面，那么 router.pathname 将会是 /about。

示例： 如果你的页面结构设计为 /posts/[id]，当用户访问 /posts/123 时，router.pathname 将会显示为 /posts/123。

router.route

相比之下，router.route 表示的是页面的实际路径模板，而不是具体的动态路径。它用于内部表示 Next.js 项目中的页面结构。

示例： 继续使用 /posts/[id] 的例子，无论实际的 id 值是什么（比如 /posts/123 或 /posts/456），router.route 始终是 /posts/[id]，这说明这是一个动态路由，[id] 是一个占位符。

核心区别

• 动态性：

  • router.pathname 是变化的，随着实际路径的变化而变化。
  • router.route 是固定的，代表着路由模板。

• 用途：

  • router.pathname 可用于显示当前的路径，或者在诸如面包屑导航中动态展示当前位置。
  • router.route 通常用于路由守卫或某些需要根据路由模板进行操作的逻辑中，比如动态加载组件或数据。

应用场景示例

假设你正在开发一个博客系统，需要根据文章的 ID 来动态显示文章内容，同时还要在导航条中高亮显示当前选中的分类。

• 使用 router.pathname 来实现导航条的高亮逻辑，因为你需要根据完整的路径来判断用户当前访问的是哪一个具体的文章。
• 使用 router.route 来决定是否加载文章内容，因为无论文章的 ID 如何变化，路由模板都是 /posts/[id]，你可以根据这一固定模板来加载对应的文章数据。

通过这样的处理，你可以有效地使用 Next.js 的路由系统来构建一个既灵活又高效的应用。