路径传参和查询传参和请求体传参区以及Vue和React的用法区分

这三者分别对应着不同的数据传递场景。简单来说：

• 路径传参 和查询传参 主要用于前端路由跳转时，在页面间传递数据。
• 请求体传参 则是在前后端通信（如 POST/PUT 请求）时，向服务器发送数据。

Vue 和 React 在这方面的核心思想是相通的，但具体写法（API）有所不同。

---

📖 概念解析与对比

我们可以用一个"寄快递"的比喻来理解：

1. 路径传参 (Path Parameters)

   • 比喻 ：写在快递单上的收货地址 。比如"XX小区 5号楼 301室"，5号楼就是路径参数，用来精确定位到唯一的资源。
   • 作用 ：用于标识一个特定的、唯一的资源 。例如，访问某个用户的个人主页 (/user/123) 或某篇文章的详情页 (/article/abc)。
   • URL形态 ：参数直接嵌入在路径中，如 /users/:id。

2. 查询传参 (Query Parameters)

   • 比喻 ：给快递员的附加指示。比如"如果没人就放快递柜"、"按重量排序再派送"。这些不改变收货地址，只是修饰了派送过程。
   • 作用 ：用于筛选、排序、分页 等，通常不是必需的。例如，搜索商品列表 (/products?keyword=phone&page=2)。
   • URL形态 ：参数跟在 ? 后面，用 & 连接，如 ?page=2&sort=name。

3. 请求体传参 (Request Body)

   • 比喻 ：包裹里的具体内容物。比如你要退货，包裹里装着你退的商品，而不是把商品信息写在快递单上。
   • 作用 ：在 POST、PUT 等请求中，向服务器提交大量或敏感的数据，如创建新用户、更新文章、登录时的密码等。这些数据不会暴露在 URL 中。
   • URL形态：URL 本身不包含这部分数据，数据隐藏在 HTTP 请求的内部。

🆚 三者的核心区别

特性	路径传参 (Path Params)	查询传参 (Query Params)	请求体传参 (Request Body)
主要用途	前端路由跳转	前端路由跳转	前后端数据通信
语义	标识资源 (是什么)	修饰资源 (怎么查)	提交数据 (增/改内容)
安全性	较低 (暴露在URL中)	较低 (暴露在URL中)	较高 (不暴露在URL中)
数据量	较小 (通常是ID)	较小 (受URL长度限制)	较大 (可传JSON、文件等)
典型请求	GET (获取单个资源)	GET (获取资源列表)	POST / PUT / PATCH

---

⚛️ Vue 与 React 的用法异同

虽然思想一致，但 Vue Router 和 React Router 的 API 设计不同，导致写法有差异。

路径传参 (Path Params)

• Vue Router

  • 定义路由 : 使用冒号声明占位符，如 path: '/user/:id'。

  • 跳转传参 : 必须使用 name 属性配合 params。

    router.push({ name: 'User', params: { id: 123 } })

  • 接收参数 : 通过 route.params.id 获取。

    const route = useRoute()
    console.log(route.params.id) // 输出: 123

• React Router

  • 定义路由 : 同样使用冒号声明占位符，如 <Route path="/user/:id" ... />。

  • 跳转传参: 直接将参数拼接到路径字符串中。

    const navigate = useNavigate();
    navigate(`/user/${id}`);

  • 接收参数 : 使用 useParams 钩子。

    import { useParams } from 'react-router-dom';
    const { id } = useParams();
    console.log(id); // 输出: 123

查询传参 (Query Params)

• Vue Router

  • 跳转传参 : 使用 query 对象，可以配合 path 或 name。

    router.push({ path: '/search', query: { keyword: 'vue' } })

  • 接收参数 : 通过 route.query.keyword 获取。

    const route = useRoute()
    console.log(route.query.keyword) // 输出: 'vue'

• React Router

  • 跳转传参: 手动将参数拼接成查询字符串。

    const navigate = useNavigate();
    navigate(`/search?keyword=react`);

  • 接收参数 : 使用 useSearchParams 钩子。

    import { useSearchParams } from 'react-router-dom';
    const [searchParams] = useSearchParams();
    console.log(searchParams.get('keyword')); // 输出: 'react'

请求体传参 (Request Body)

这个部分与路由库无关 ，Vue 和 React 项目中的做法是完全一样的。通常都使用 axios、fetch 等 HTTP 客户端库来完成。

• 通用实现方式 (以 axios 为例)

  • 发送数据: 将数据作为第二个参数传递给 POST/PUT 方法。

    // 在 Vue 或 React 组件中都一样
    async function saveUser() {
      const newUser = { username: 'Alice', password: '123456' };
      const response = await axios.post('/api/users', newUser);
      console.log(response.data);
    }

  • 后端接收: 后端框架（如 Express, SpringBoot）会从请求体中解析出 JSON 数据。

总结

1. 路径和查询传参 是前端路由的概念，用于页面间导航和数据传递。请求体传参是网络请求的概念，用于和服务器交互。
2. Vue 和 React 在处理路由传参时，API 不同，需要分别记忆。
3. 在进行请求体传参时，两者没有区别，都是使用相同的 HTTP 库。