Node.js Meteor Flow-router

#FlowRouter
クライアントサイドルーティングパッケージ｡
公式ドキュメントに紹介されている｡
昔はiron-routerのほうが流行っていたらしいけど,今はこっちがおすすめされている｡
(サーバーサイドもできるようにしたいよねーと思ってるらしい｡[鯖サイドブランチがこちら](https://github.com/kadirahq/flow-router/tree/ssr))

#ドキュメント
- https://kadira.io/academy/meteor-routing-guide/content/introduction-to-flow-router
- https://guide.meteor.com/routing.html

#インストール
```
meteor create flowRouterTest
cd flowRouterTest
meteor add kadira:flow-router
meteor add kadira:blaze-layout
meteor debug
```

#基本ルーティング
```:フォルダ構成
flowRouterTest
 |-client
    |-main.html
    |-main.js
 
```

```js:main.js
import './main.html';

// rootアクセス時にhomeテンプレートを描画
FlowRouter.route('/',{
  action(){
    BlazeLayout.render('home');
  }
});

// aboutアクセス時にaboutテンプレートを描画
FlowRouter.route('/about',{
  action(){
    BlazeLayout.render('about');
  }
});

//not found時
FlowRouter.notFound = {
  action(){
    //ルートへ移動
    FlowRouter.go('/');
  }
}
```

```html:main.html
<template name="home">
  homeです
</template>

<template name="about">
  aboutです
</template>
```

#ナビゲーションバー例
ヘッダーやフッターの為に毎回{{> }}を書くのが面倒な人用

```html:main.html
<template name="appBody">
  {{> navigationBar}}
  {{> Template.dynamic template=content}}
</template>

<template name="navigationBar">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</template>

<template name="home">
  homeです
</template>

<template name="about">
  aboutです
</template>
```

```js:main.js
import './main.html';

// rootアクセス時にhomeテンプレートを描画
FlowRouter.route('/',{
  action(){
    BlazeLayout.render('appBody',{content:'home'});
  }
});

// aboutアクセス時にaboutテンプレートを描画
FlowRouter.route('/about',{
  action(){
    BlazeLayout.render('appBody',{content:'about'});
  }
});
```

#URL引数
ルーティングシンタックスは[path-to-regex](https://github.com/component/path-to-regexp)を利用している｡Expressっぽくかける｡

```
/blog/:category/:id
```
| URL | マッチするか | params | queryParams |
|:-------------:|:-:|:-:|:-:|
| /             | いいえ  |   |   |
| /blog/game/        | いいえ  |   |   |
| /blog/game/mIelf| はい    | {id:"mIelf",category:"game"} |   |
| /blog/game/1       | はい    | {id: "1", category:"game"} |   |
| /blog/game/1?comments=hoge  | はい|{id:"1",category:"game"} |{comments:"hoge"}   |


```js:main.js
import './main.html';

// rootアクセス時にhomeテンプレートを描画
FlowRouter.route('/blog/:category/:id',{
  action(params, queryParams){
    console.log(params);
    console.log(queryParams);
  }
});
```

##引数を描画する例


```:URL
http://localhost:3000/user/jaeFnbEd
```
```js:main.js
import { Template } from 'meteor/templating';
import './main.html';

FlowRouter.route('/user/:id',{
  action(){
    BlazeLayout.render('userpage');
  }
});

Template.userpage.helpers({
  userId(){
    return FlowRouter.getParam('id');
  }
});
```
```html:main.html
<template name="userpage">
{{userId}}
</template>  
```

#グループルーティング
```js:adminExample
//何個もadmin書く
FlowRouter.route('/admin',{});
FlowRouter.route('/admin/config',{});
FlowRouter.route('/admin/list',{});
```
例えばこういう風に何度もadmin書くのダルい場合まとめられる

```js:adminExample
var adminSection = FlowRouter.group({
    prefix: "/admin"
});
adminSection.route('/',{});
adminSection.route('/config',{});
adminSection.route('list',{});
```