區分query和params參數用法，正確傳參方法揭秘

一、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等框架中傳遞參數。