一、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等框架中传递参数。