Edited at

Meteorのあんちょこ꒰。・ω・`;꒱ Routes編

More than 1 year has passed since last update.


概要:FlowRouter(kadira:flow-router)


サンプル


console

$ meteor create --example todos

To create the todos example, please run:
git clone https://github.com/meteor/todos
$ git clone https://github.com/meteor/todos
$ cd todos
$ rm -rf .git
$ meteor


Hello, routes!

1.プロジェクト作成


console

$ meteor create routes


2.パッケージインストール


console

$ meteor add kadira:flow-router

# 動作確認
$ meteor

3.最初のルーティング


  • client/main.html...削除

  • client/main.js→index.js...リネーム


client/index.js

import './routes.js';



client/routes.js

import { FlowRouter } from 'meteor/kadira:flow-router';

FlowRouter.route('/lists/:_id', {
name: 'Lists.show',
action(params, queryParams) {

// ex. http://localhost:3000/lists/2

console.log('[FlowRouter.getRouteName]' + FlowRouter.getRouteName()); // Lists.show

console.log('[FlowRouter.getParam]' + FlowRouter.getParam('_id')); // 2

// console.log('[FlowRouter.getQueryParam]' + FlowRouter.getQueryParam('data'));

console.log('[params._id]' + params._id); // 2

alert("Hello, routes!");
}
});



  • 動作確認

  • "localhost:3000/lists/1"にアクセスすると、"Hello, routes!"のアラートが表示される。

  • params._idで、_idを取得できる。


console

# 動作確認

$ meteor


browser-console

[FlowRouter.getRouteName]Lists.show

[FlowRouter.getParam]2
[params._id]2


アクティブルートのハイライト


console

meteor add kadira:blaze-layout