koa2入门系列 Part 2

路由中间件koa-router

在我们使用vue或者react的时候，页面跳转都会有对应都路由中间件如vue-router或者react-routrer，而koa对应的就是koa-router。

1、下载

`yarn add koa-router`

2、在app.js中使用路由中间件

const Koa = require('koa');
const Router = require('koa-router');

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

3、定义路由页面

在上一节代码中加入路由代码之后的代码如下

const Koa = require('koa');
const Router = require('koa-router');

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

app.use(async ctx => {
  ctx.body = 'Hello world !';
});

router.get('/', ctx => {
  ctx.body = '首页';
});

router.get('/news', ctx => {
  ctx.body = '新闻页';
});

//启动路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

由于是node程序，app.js的代码改变之后，想要看到最新的结果都是要重启node服务的，所以重启之后刷新浏览器页面，结果看到的还是hello world并不是显示首页，输入http://localhost:3000/news也没显示想要的新闻页,
这是因为ctx.body = 'Hello world !'这段代码已经让node程序执行完了，并没有向下执行路由中间件，想要如期执行，就要用到koa的重要概念异步了。

const Koa = require('koa');
const Router = require('koa-router');

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

app.use(async (ctx, next) => {
  console.log('1');
  await next();
  console.log('4');
});

router.get('/', ctx => {
  console.log('2');
  ctx.body = '首页';
});

router.get('/news', ctx => {
  console.log('3');
  ctx.body = '新闻页';
});

//启动路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

重启node，刷新浏览器，Bingo！终于出现了想要的首页，而且在命令行下面发现以下输出

chenhy-2:koa2 chenhaoyin$ node app.js
1
2
4

然后跳转http://localhost:3000/news，页面同时展现的是新闻页，命令行下面也会分别打印1 3 4。
到了这里，koa的路由中间件基本用法就实现了，接着往下看