掌握路由传参技巧，轻松玩转 URL 参数与页面跳转

2024-02-01 17:17:26

路由传参的原理

路由传参是通过在 URL 中添加参数来传递数据的一种技术。参数通常以问号 (?) 开头，后面跟着参数名称和参数值，多个参数之间使用符号 (&) 隔开。例如，以下 URL 包含了两个参数：

https://example.com/page.html?id=123&name=John Doe

在这个 URL 中，id 参数的值是 123，name 参数的值是 John Doe。当浏览器访问此 URL 时，它将把这些参数传递给目标页面。

路由传参的方法

有几种不同的方法可以实现路由传参。最常见的方法是使用查询字符串。查询字符串是 URL 中问号 (?) 后面的部分，它包含了参数和值。例如，以下 URL 使用查询字符串来传递参数：

https://example.com/page.html?id=123&name=John Doe

另一种实现路由传参的方法是使用片段标识符。片段标识符是 URL 中井号 (#) 后面的部分。它不会被发送到服务器，因此不会影响页面加载。但是，它可以被 JavaScript 代码访问，因此可以用于在页面加载后传递数据。例如，以下 URL 使用片段标识符来传递参数：

https://example.com/page.html#id=123&name=John Doe

路由传参的应用场景

路由传参有许多不同的应用场景，包括：

页面跳转和数据传递： 路由传参最常见的应用场景是页面跳转和数据传递。例如，当您在电子商务网站上点击一个产品链接时，浏览器会将您重定向到产品详情页面。同时，产品详情页面的 URL 中会包含产品 ID 等参数。这样，当您访问产品详情页面时，就可以通过这些参数获取产品信息。
表单提交： 当您提交表单时，浏览器会将表单中的数据提交到服务器。这些数据可以通过查询字符串或片段标识符传递。例如，以下表单使用查询字符串来传递数据：

<form action="https://example.com/submit.php">
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="submit" value="Submit">
</form>

AJAX 请求： AJAX 请求是一种异步请求，它不会刷新页面。因此，我们可以使用 AJAX 请求来传递数据，而不会影响页面加载。例如，以下 JavaScript 代码使用 AJAX 请求来传递数据：

$.ajax({
  url: "https://example.com/submit.php",
  data: {
    name: "John Doe",
    email: "john.doe@example.com"
  },
  success: function(data) {
    console.log(data);
  }
});