Node.js Meteor Flow-router

FlowRouter

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

ドキュメント

• 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

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('/');
  }
}

main.html

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

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

ナビゲーションバー例

ヘッダーやフッターの為に毎回{{> }}を書くのが面倒な人用

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>

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を利用している｡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"}

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

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');
  }
});

main.html

<template name="userpage">
{{userId}}
</template>  

グループルーティング

adminExample

//何個もadmin書く
FlowRouter.route('/admin',{});
FlowRouter.route('/admin/config',{});
FlowRouter.route('/admin/list',{});

例えばこういう風に何度もadmin書くのダルい場合まとめられる

adminExample

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