dede购物网站,搬搬屋源码网,wordpress的DUX主题,代理网页浏览在Web开发中#xff0c;query参数#xff08;URL查询参数#xff09;和params参数#xff08;路由参数#xff09;是两种不同的URL传参方式#xff0c;它们的核心区别如下#xff1a; 一、 位置不同
query参数params参数位置URL中?之后#xff0c;用连接多个参数…在Web开发中query参数URL查询参数和params参数路由参数是两种不同的URL传参方式它们的核心区别如下 一、 位置不同
query参数params参数位置URL中?之后用连接多个参数URL路径中的一部分示例/search?qvuepage2/user/123/profile 二、 用途不同
query参数params参数场景可选的非关键参数过滤、排序、分页等必填的资源标识符ID、slug等特点参数可缺失顺序无关参数是路径的一部分通常不可缺失
示例对比 # params标识资源获取ID为456的商品
GET /api/products/456# query过滤资源搜索价格≤100的手机按销量排序
GET /api/products?categoryphonemaxPrice100sortsales 三、 代码获取方式不同
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); // vueconsole.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与缓存影响
query参数params参数SEO可能被搜索引擎视为同一页面不同状态通常作为独立页面处理缓存不同query可能共享缓存不同params通常视为不同资源 五、 使用建议 用params的场景 标识唯一资源如/user/:id 需要友好的URL结构如/blog/react-vs-vue RESTful API设计中的资源定位 用query的场景 过滤条件如?categorybooks 分页参数如?page3limit20 排序参数如?sortpriceorderasc 不影响核心资源的可选参数 六、 高级技巧 混合使用 # 同时使用params和query
GET /category/books?minPrice50sortrating 类型转换 // query参数默认是字符串需手动转换类型
const page Number(req.query.page) || 1; 参数校验 // 使用express-validator等库验证参数
checkParams(id).isInt({ min: 1 })
checkQuery(page).optional().isInt({ min: 1 }) 总结 params是路径的一部分用于标识资源 query是附加参数用于描述资源的状态 掌握二者的区别能让你的URL设计更符合RESTful规范同时提升API的可维护性和可读性。
