在HTTP请求中，路径参数（Path Parameters）和查询参数（Query Parameters）是两种不同的参数传递方式。它们有以下区别：
1. 路径参数（Path Parameters）：
   - 传递方式：路径参数是通过URL的路径部分来传递的，通常以`/`分隔路径段，并使用占位符来表示参数的值。
   - 示例：`http://example.com/users/{userId}`
   - 在上面的示例中，`{userId}`是路径参数的占位符，实际的参数值将替换占位符部分。
   - 使用场景：路径参数常用于标识资源或指定资源的唯一标识符，例如获取用户信息、获取特定文章等。
2. 查询参数（Query Parameters）：
   - 传递方式：查询参数是通过URL的查询字符串部分来传递的，以`?`开头，多个参数之间用`&`分隔。
   - 示例：`http://example.com/users?name=John&age=25`
   - 在上面的示例中，`name`和`age`是查询参数的名称，`John`和`25`是对应参数的值。
   - 使用场景：查询参数常用于传递筛选、排序、分页等额外的请求参数，例如搜索用户、排序商品列表等。
总结：
- 路径参数用于标识资源或指定唯一标识符，通过URL的路径部分传递。
- 查询参数用于传递额外的请求参数，通过URL的查询字符串部分传递。
在前端开发中，你可以使用不同的方式来处理路径参数和查询参数。对于路径参数，你可以使用路由库（如React Router）来解析和提取参数值；对于查询参数，你可以使用URLSearchParams或手动构造URL来包含查询参数。

以下是一个示例函数，用于在前端点击发送验证码按钮后，通过获取表单中的邮箱，将邮箱通过路径参数通过POST请求传递给后端发送验证码：

function sendVerificationCode() {
  const userEmail = document.getElementById('emailInput').value; // 获取邮箱输入框的值

  axios.post(`http://example.com/send-verification-code/${userEmail}`)
  .then(response => {
    // 验证码发送成功的处理逻辑
    console.log('验证码发送成功！');
  })
  .catch(error => {
    // 验证码发送失败的处理逻辑
    console.error('验证码发送失败：', error);
  });
}

当使用 Axios 发起请求时，可以使用 params 参数来传递查询参数。以下是一个使用 Axios 发起 GET 请求并传递 params 参数的示例：

axios.get('/api/products', {
  params: {
  category: 'electronics',
  price: 100
  }
})
  .then(response => {
  // 请求成功后的处理
  console.log(response.data);
  })
  .catch(error => {
  // 请求失败后的处理
  console.error(error);
  });