详细说明koa路由器路由参数和前端路由的组合

当koa-router定制路由时，它支持以冒号形式在url中指定参数，这些参数将被装载到上下文中，然后可以通过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函数(ctx，next){ const UserID=CTX . params . id；ctx.body=`用户id为： $ { UserID } `；});app.use(router.routes())。使用(router . allowedmethods())；app . listen(3000)；console.log('服务器启动于http : localhost :3000 ')；启动服务后，您可以看到从url获取的id参数显示在页面上。

路由参数的获取和显示

现在考虑另一种情况，即路由中支持前端路由的情况。

也就是说，当前url从/user/:id扩展到/user/:id/foo/bar，其中/foo/bar可以是任何路由，作为前端处理的路由部分。

为了实现这样的前端路由部分，需要通过正则化的方式进行服务器端路由的配置，

- router.get('/user/:id '，async函数(ctx，next){ router . get(['/user/: id '，/\/user\/([\w|\d] )\/。*/]，异步函数(ctx，next){ const UserID=CTX . params . id；ctx.body=`用户id为： $ { UserID } `；});在这里，路由中的url从单个字符串变成了数组形式，第一个是原来的路由，这样/user/1形式的普通页面就可以命中路由了。同时，添加/\/user\/([\w|\d] )\/。*/，因为路由中通过冒号的参数配置在正则性的情况下不再被支持，所以id跟在/user/这里也需要被正则性代替。

但是，常规匹配下的路由无法通过context.params访问url上的参数幸运的是，参数可以以常规中定义的Capturing Groups的形式定义，也就是说，用方括号([\w|\d])包装的部分称为匹配组，匹配组将自动挂载到context.params上，只是它没有像冒号定义的参数那样的名称。这种形式的参数按照匹配顺序赋给数组中的context.params，因此访问第一个匹配组形成的参数可以通过context.params[0]获得。

因此，上面的代码稍加修改后，可以正确处理由命名参数(通过冒号匹配)或常规参数形成的查询参数。

- router.get('/user/:id '，async函数(ctx，next){ router . get(['/user/: id '，/\/user\/([\w|\d] )\/。*/]，异步函数(ctx，next){-const UserID=CTX . params . id；const UserID=CTX . params . id | | CTX . params[0]；ctx.body=`用户id为： $ { UserID } `；});最终完整的代码如下所示：

var Koa=require(' Koa ')；var Router=require(' KOA-Router ')；var app=new Koa()；var Router=new Router()；router.get(['/user/:id '，/\/user\/([\w|\d] )\/。*/]，异步函数(ctx，next){ const UserID=CTX . params . id | | CTX . params[0]；ctx.body=`用户id为： $ { UserID } `；});app.use(router.routes())。使用(router . allowedmethods())；app . listen(3000)；console.log('服务器启动于http : localhost :3000 ')；此时，访问以下连接进行测试，

http://localhost 33603000/user/1 http://localhost 33603000/user/2/foo http://localhost :3000/user/3/foo/bar可以正确命中页面并成功获取路由中的参数。

常规路由和路由参数的获取

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。