Nextjs中router的push方法使用详解

在Next.js中，router.push方法用于处理客户端的页面跳转。它比next/link组件更灵活，适用于一些特殊的场景。 有时候会疑惑传一个参数和传两个参数又是那么不一样，第二个参数的作用是什么？传两个参数和传一个参数有什么不同？第三个参数有哪些选择。这里做下记录。下面是对router.push方法的详细解释：

• router.push(url, as, options)：这是router.push方法的函数签名。它接受三个参数：

  • url：要导航到的URL，可以是字符串或UrlObject。UrlObject是一个包含URL属性的对象，可以参考Node.js的URL模块文档来了解其属性。

  • as：可选参数，用于在浏览器URL栏中显示的路径装饰器。在Next.js 9.5.3之前，它用于动态路由。

  • options：可选参数，是一个包含以下配置选项的对象：

    • scroll：可选布尔值，控制导航后是否滚动到页面顶部。默认为true。
    • shallow：可选布尔值，更新当前页面的路径而不重新运行getStaticProps、getServerSideProps或getInitialProps。默认为false。
    • locale：可选字符串，指定新页面的区域设置。

• 示例代码：

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/about')}>
      Click me
    </button>
  )
}

 

上述代码中，当按钮被点击时，会使用router.push方法将页面导航到/about。

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/post/abc')}>
      Click me
    </button>
  )
}

 

上述代码中，当按钮被点击时，会使用router.push方法将页面导航到/post/abc。