Next.js 中问号与井号的区别

在 Next.js 中，我们经常会用到 URL 中的参数传递。在参数传递中，问号和井号是两种常用的方式。虽然问号和井号都能够实现传递参数的功能，但是它们的区别是很大的，本文将详细介绍它们的差异以及使用方法。

问号的用法

在 URL 中，问号（?）表示查询字符串的起始位置，用于传递简单的数据，比如 GET 请求中的参数。当我们使用问号传递参数时，我们需要将参数写在问号后面，并以键值对的形式出现。如下所示：

// 传递参数
http://localhost:3000/posts?category=javascript&page=1

// 获取参数
const category = router.query.category
const page = router.query.page

在上面的代码中，我们在 URL 中传递了两个参数 category 和 page，通过 router.query 获取这两个参数。获取到的参数是一个对象，其中包含传递参数的所有键值对。

查询参数可以使用 URLSearchParams 对象来实现参数的管理。当然，我们也可以手动解析 URL，来获取和设置查询参数。

井号的用法

与问号不同，井号（#）用于锚点，表示跳转到页面的某个位置。在 Next.js 中，我们可以使用import {useRouter} from 'next/router'来获取路由信息。

const router = useRouter()

// 锚点
router.push('/posts#banner')

在上面的代码中，我们使用 router.push() 来实现跳转到指定的位置（在本例中，是 #banner）。

使用井号传递参数时，可以在传递参数后面使用 key=value 的形式来传参，这些参数通常称为“哈希参数”或“Fragment 标识符“。

// 传递参数
http://localhost:3000/posts#category=javascript&page=1

// 获取参数
const category = router.asPath.match(/#category=(.*?)&/)[1]
const page = router.asPath.match(/&page=(.*?)$/)[1]

在上面的代码中，我们在 URL 中传递了两个参数 category 和 page，使用 router.asPath 来获取传递参数的字符串，并使用正则表达式来获取这两个参数的值。

问号和井号的区别

总的来说，问号和井号的用法是非常不一样的。

问号常常用于传递简单的参数，而井号则通常用于跳转到页面的某个位置。在传递参数时，问号通常将参数作为 URL 的一部分，而井号将参数保存在 URL 的锚点部分，切记不可混淆使用。

此外，井号传递参数时需要使用正则表达式从 URL 字符串中提取参数，使用较为复杂。而问号传递参数则直接使用 router 对象来获取参数，使用较为简单。

总结

本文详细介绍了 Next.js 中问号和井号的用法和区别，包括传递参数和获取参数的方法，并提供了示例代码。同时，我们也提醒大家在使用问号和井号传递参数时注意它们的差异，以避免出现不必要的错误。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492ae5048841e989407a57d