meteor
라우팅

Iron Router를 통한 라우팅

Iron Router 설치

터미널에서 :

meteor add iron:router

기본 구성

Router.configure({
    //Any template in your routes will render to the {{> yield}} you put inside your layout template 
    layoutTemplate: 'layout',
    loadingTemplate: 'loading'
});

데이터없이 렌더링

//this is equal to home page
Router.route('/', function (){
    this.render('home')
});

Router.route('/some-route', function () {
    this.render('template-name');
});

데이터 및 매개 변수로 렌더링

Router.route('/items/:_id', function () {
    this.render('itemPage', {
        data: function() {
            return Items.findOne({_id: this.params._id})
        }
    });
});

2 차 수익률로 렌더링

Router.route('/one-route/route', function() {
    //template 'oneTemplate' has {{> yield 'secondary'}} in HTML
    this.render('oneTemplate');
    
    //this yields to the secondary place
    this.render('anotherTemplate', {
        to: 'secondary'
    });

    //note that you can write a route  for '/one-route' 
    //then another for '/one-route/route' which will function exactly like above.
});

템플릿을 렌더링하기 전에 데이터 구독 및 대기

Router.route('/waiting-first', {
    waitOn: function() {
        //subscribes to a publication 
        //shows loading template until subscription is ready
        return Meteor.subscribe('somePublication')
    },

    action: function() {
        //render like above examples
    }
});

여러 발행물에 가입하고 렌더링 템플릿 전에 데이터 대기

Router.route('/waiting-first', {
    waitOn: function() {
        //subscribes to a publication 
        //shows loading template until subscription is ready
        return [Meteor.subscribe('somePublication1'),Meteor.subscribe('somePublication2')];
    },

    action: function() {
        //render like above examples
    }
});

아이언 라우터 가이드 : http://iron-meteor.github.io/iron-router/

FlowRouter로

FlowRouter 는 Iron Router에 비해 모듈 식입니다.

FlowRouter 설치

meteor add kadira:flow-router

템플릿 렌더링

특히 레이아웃 렌더링 패키지를 수동으로 추가하여 렌더링 엔진과 연결해야합니다.

• 블레이즈 용 블레이즈 레이아웃 : meteor add kadira:blaze-layout
• React를 위한 반응 레이아웃 : meteor add kadira:react-layout

그런 다음 동적 템플릿을 통해 렌더링 할 수 있습니다 (Blaze의 경우).

<template name="mainLayout">
  {{> Template.dynamic template=area}}
</template>

FlowRouter.route('/blog/:postId', {
  action: function (params) {
    BlazeLayout.render("mainLayout", {
      area: "blog"
    });
  }
});

매개 변수 및 / 또는 쿼리를 사용하여 템플릿 렌더링

매개 변수는 Iron Router와 같이 경로에 지정됩니다.

FlowRouter.route("/blog/:catId/:postId", {
  name: "blogPostRoute",
  action: function (params) {
    //...
  }
})

그러나 매개 변수는 하위 템플릿에 데이터 컨텍스트로 전달되지 않습니다. 대신 하위 템플릿은 반드시 읽어야합니다.

// url: /blog/travel/france?showcomments=yes
var catId = FlowRouter.getParam("catId"); // returns "travel"
var postId = FlowRouter.getParam("postId"); // returns "france"

var color = FlowRouter.getQueryParam("showcomments"); // returns "yes"