在Web开发中，query参数（URL查询参数）和params参数（路由参数）是两种不同的URL传参方式，它们的核心区别如下：

一、 位置不同

二、 用途不同

示例对比：

# params标识资源：获取ID为456的商品
GET /api/products/456

# query过滤资源：搜索价格≤100的手机，按销量排序
GET /api/products?category=phone&maxPrice=100&sort=sales

三、 代码获取方式不同

1. Express.js中获取参数

// params参数：通过 req.params 获取
app.get('/user/:id', (req, res) => {
  console.log(req.params.id); // 123
});

// query参数：通过 req.query 获取
app.get('/search', (req, res) => {
  console.log(req.query.q);    // "vue"
  console.log(req.query.page); // "2"
});

2. Vue Router中获取参数

// params参数：通过 $route.params 获取
this.$route.params.id // 123

// query参数：通过 $route.query 获取
this.$route.query.q    // "vue"
this.$route.query.page // "2"

四、 SEO与缓存影响

五、 使用建议

1. 用params的场景：

   • 标识唯一资源（如/user/:id）

   • 需要友好的URL结构（如/blog/react-vs-vue）

   • RESTful API设计中的资源定位

2. 用query的场景：

   • 过滤条件（如?category=books）

   • 分页参数（如?page=3&limit=20）

   • 排序参数（如?sort=price&order=asc）

   • 不影响核心资源的可选参数

六、 高级技巧

1. 混合使用：

   # 同时使用params和query
   GET /category/books?minPrice=50&sort=rating

2. 类型转换：

   // query参数默认是字符串，需手动转换类型
   const page = Number(req.query.page) || 1;

3. 参数校验：

   // 使用express-validator等库验证参数
   checkParams('id').isInt({ min: 1 })
   checkQuery('page').optional().isInt({ min: 1 })

总结：

• params是路径的一部分，用于标识资源

• query是附加参数，用于描述资源的状态
  掌握二者的区别，能让你的URL设计更符合RESTful规范，同时提升API的可维护性和可读性。