快捷導(dǎo)航

koa-router路由參數(shù)和前端路由的結(jié)合詳解

更新時(shí)間：2019年05月19日 11:35:59 作者：劉哇勇

這篇文章主要給大家介紹了關(guān)于koa-router路由參數(shù)和前端路由的結(jié)合的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用koa-router具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

koa-router 定制路由時(shí)支持通過(guò)冒號(hào)形式在 url 中指定參數(shù)，該參數(shù)會(huì)掛載到 context 上然后可通過(guò) context.params.paramName 方便地獲取。

考察下面的示例：

var Koa = require("koa");
var Router = require("koa-router");

var app = new Koa();
var router = new Router();

router.get("/user/:id", async function(ctx, next) {
 const userId = ctx.params.id;
 ctx.body = `user id is:${userId}`;
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000);

console.log("server started at http:localhost:3000");

啟動(dòng)服務(wù)后可看到頁(yè)面中展示出了從 url 中獲取到的 id 參數(shù)。

路由參數(shù)的獲取展示

現(xiàn)在來(lái)考慮另一種情況，即路由中支持前端路由的情況。

即把現(xiàn)在的 url 由 /user/:id 的形式擴(kuò)展成 /user/:id/foo/bar，這里 /foo/bar 部分可以是任何路由，作為前端處理的路由部分。

為了實(shí)現(xiàn)這樣的前端路由部分，服務(wù)端路由的配置需要借助正則來(lái)進(jìn)行，

- router.get("/user/:id", async function(ctx, next) {
+ router.get(["/user/:id", /\/user\/([\w|\d]+)\/.*/], async function(ctx, next) {
 const userId = ctx.params.id;
 ctx.body = `user id is:${userId}`;
});

這里將路由中 url 由單個(gè)字符串變成了數(shù)組形式，第一個(gè)還是原來(lái)的路由，這樣正常的通過(guò) /user/1 形式過(guò)來(lái)的頁(yè)面能命中該路由。同時(shí)添加 /\/user\/([\w|\d]+)\/.*/ 部分，因?yàn)檎齽t情況下不再支持路由中通過(guò)冒號(hào)進(jìn)行參數(shù)的配置，所以這里 /user/ 后跟隨的 id 也需要使用正則來(lái)替換掉。

但正則匹配下的路由就不能通過(guò) context.params 來(lái)訪問(wèn) url 上的參數(shù)了。不過(guò)好在可通過(guò)在正則中定義匹配組（Capturing Groups）的形式來(lái)定義參數(shù)，即其中 ([\w|\d]+) 括號(hào)包裹的部分，稱為一個(gè)匹配組，一個(gè)匹配組是會(huì)自動(dòng)被掛載到 context.params 上的，只是不像通過(guò)冒號(hào)定義的參數(shù)那樣會(huì)有一個(gè)名字，這種形式的參數(shù)按照匹配到的順序形成一個(gè)數(shù)組賦值到 context.params，所以訪問(wèn)第一個(gè)匹配組形成的參數(shù)可通過(guò) context.params[0] 來(lái)獲取。

于是上面的代碼稍加修正后，就能夠正確處理來(lái)自命名參數(shù)（通過(guò)冒號(hào)匹配）或正則參數(shù)形成的 query 參數(shù)了。

- router.get("/user/:id", async function(ctx, next) {
+ router.get(["/user/:id", /\/user\/([\w|\d]+)\/.*/], async function(ctx, next) {
- const userId = ctx.params.id;
+ const userId = ctx.params.id || ctx.params[0];
 ctx.body = `user id is:${userId}`;
});

最后完整的代碼會(huì)是這樣：

var Koa = require("koa");
var Router = require("koa-router");

var app = new Koa();
var router = new Router();

router.get(["/user/:id", /\/user\/([\w|\d]+)\/.*/], async function(ctx, next) {
 const userId = ctx.params.id || ctx.params[0];
 ctx.body = `user id is:${userId}`;
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000);

console.log("server started at http:localhost:3000");

此時(shí)訪問(wèn)以下連接進(jìn)行測(cè)試，