一、query和params参数用法的区别
当我们使用Vue、React、Express等框架进行Web应用的开发时，query和params常常会在路由跳转、请求接口等场景中被用到。那么query和params参数有什么区别呢？
query参数是通过查询字符串的方式传递给服务器的，一般出现在URL中被问号分隔开。例如：
https://www.example.com/articles?id=1&category=web
这里的id和category就是query参数。在前端中，通过Vue、React等框架进行路由跳转时，也可以将query参数传递给下一个路由页面。
params参数则是通过URL路径的方式传递给服务器的，一般出现在URL的路径中。例如：
https://www.example.com/articles/1/web
这里的1和web就是params参数。在Express等后端框架中，也可以通过设置路由的方式来获取params参数。
二、正确传参的方法
在使用query和params参数时，我们需要注意一些细节问题，以避免产生一些难以调试的问题。
首先，在使用query参数时，我们需要注意参数的编码问题。例如空格、#、%等特殊字符，在传递给服务器时需要进行编码。这可以通过encodeURIComponent函数来实现：
let url = "https://www.example.com/articles?id=1&category=web#frontend"; let encodedUrl = encodeURIComponent(url); console.log(encodedUrl); // "https%3A%2F%2Fwww.example.com%2Farticles%3Fid%3D1%26category%3Dweb%23frontend"
接着，在使用params参数时，我们需要通过路由的方式来获取参数。例如，在Express中，可以通过以下代码来获取params参数：
// 设置路由
app.get("/articles/:id/:category", (req, res) => {
const id = req.params.id;
const category = req.params.category;
res.send(`id: ${id}, category: ${category}`);
});
// 访问路由
// https://www.example.com/articles/1/web
// 返回：id: 1, category: web
如果需要在Vue、React等框架中传递params参数，同样需要设置路由，并在跳转页面时传递参数。以Vue为例：
// 在路由中设置参数
{
path: "/articles/:id/:category",
name: "articles",
component: Articles
}
// 在跳转页面时传递参数
this.$router.push({ name: "articles", params: { id: 1, category: "web" }})
三、总结
在Web开发中，我们经常需要使用query和params参数来传递参数。query参数通过查询字符串的方式传递给服务器，可以通过URL的方式直接在浏览器中访问，但需要注意参数的编码问题；params参数通过URL路径的方式传递给服务器，需要通过路由的方式获取参数，可以通过设置路由来在Vue、React等框架中传递参数。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/307021.html
微信扫一扫 
支付宝扫一扫 