nextjs router.asPath router.pathname 介绍

本文主要是介绍nextjs router.asPath router.pathname 介绍，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在 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;