路由的query和params参数有什么区别

络卡

于 2024-10-08 10:44:49 发布

阅读量536

点赞数 20

分类专栏： javascript 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/DOVISK/article/details/142753650

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在前端路由中，query 和 params 都是用来传递数据的方式，但它们在使用方式、传递路径和作用上有所不同。
⚠️注意：以下代码是在umi.js环境中适用(需要有react基础)

1. `Query` 参数（查询参数）

位置: query 参数是通过 URL 中的 查询字符串 传递的，它位于 URL 的 ? 之后。例如：
```
/products?category=shoes&color=red
```
获取方式: 在umijs中可以通过 useLocation 钩子来获取 query 参数。它们存储在 location.search 中，可以通过 URLSearchParams 对象来解析这些查询参数。
作用: query 参数通常用来过滤、排序或分页等功能。它们是非必需的参数，允许在保持同一页面的情况下动态地修改一些状态或请求。
特点:
- 参数是可选的，可以在同一个 URL 中携带多个。
- 用户可以直接在浏览器地址栏中修改 query 参数。
- query 参数没有顺序，顺序不影响解析。
示例 URL:
```
/search?keyword=react&page=2
```
在这里，keyword 和 page 是 query 参数。

获取 query 参数示例:

import { useLocation } from 'umi';

export default function SearchComponent() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);

  const keyword = params.get('keyword'); // 获取查询参数
  const page = params.get('page');

  return (
    <div>
      <p>Keyword: {keyword}</p>
      <p>Page: {page}</p>
    </div>
  );
}

2. `Params` 参数（路径参数）

位置: params 参数是通过 动态路由 的 URL 传递的，它们直接嵌入在 URL 的路径中。例如：
```
/products/shoes/123
```
在这个 URL 中，123 就是一个 params 参数，通常用来表示资源的唯一标识符。
获取方式: 可以通过 useParams 或 useRouteMatch 钩子来获取 params 参数。动态路由参数由路由定义时指定的占位符（如 /products/:id）来捕获。
作用: params 参数通常用于唯一标识某个资源，如用户 ID、产品 ID 等。这些参数是路由的一部分，通常是必需的，用于访问某个具体的页面。
特点:
- 参数是必需的，通常用于特定资源的访问。
- 在 URL 路径中以斜杠 / 分隔。
- 参数顺序必须严格按照路由定义。
示例 URL:
```
/users/123/orders
```
在这里，123 是用户的 ID，是 params 参数。

获取 params 参数示例:

import { useParams } from 'umi';

export default function UserComponent() {
  const { id } = useParams(); // 从路径中获取参数

  return (
    <div>
      <p>User ID: {id}</p>
    </div>
  );
}

区别总结

特性	`query` 参数	`params` 参数
位置	在 `?` 后面，作为 URL 查询字符串的一部分	嵌入在 URL 路径中
使用场景	过滤、排序、分页等非必需信息	用于标识资源，通常是必需的
获取方式	`useLocation` 或 `URLSearchParams` 解析	`useParams` 或 `useRouteMatch` 获取
格式	`/path?key=value`	`/path/:param`
参数可选性	可选，可以有多个且顺序无关	必需，顺序和路由定义严格相关
用户修改	用户可以在地址栏修改	用户通常不会直接修改，属于 URL 设计的一部分
典型应用	搜索关键词、页码、过滤条件	用户 ID、产品 ID、文章 ID 等