当前位置：首页 > article >正文

nextjs router.asPath router.pathname 介绍

article 2025/2/1 23:55:16

在 Next.js 中，router 对象提供了很多有用的方法和属性，帮助你控制页面导航和获取当前路由信息。其中，router.asPath 和 router.pathname 是两个常用的属性，它们各自提供了关于当前 URL 的不同信息。

router.asPath
router.asPath返回当前页面的完整 URL 路径，包括查询参数。这个属性对于需要显示当前完整 URL 的情况非常有用，比如在某些 UI 元素中显示当前页面的链接。

例如，如果你的页面 URL 是 https://example.com/page?query=value，那么 router.asPath 的值将会是 /page?query=value。

router.pathname
router.pathname 返回当前页面的路径名，不包括查询参数。这个属性对于只需要获取页面路径名的情况很有用，比如进行路由条件判断或构建其他 URL。

继续上面的例子，router.pathname 的值将会是 /page。

使用示例
你可以通过 useRouter Hook 在 Next.js 组件中访问 router 对象。下面是一个简单的使用示例：

import { useRouter } from 'next/router';  
  
function MyComponent() {  
  const router = useRouter();  
  
  return (  
    <div>  
      <p>当前页面的完整 URL 路径是：{router.asPath}</p>  
      <p>当前页面的路径名是：{router.pathname}</p>  
    </div>  
  );  
}  
  
export default MyComponent;