Emberjs-router-defining-routes

EmberJS-ルートの定義

ルーターは、現在のURLを、テンプレートの表示、データの読み込み、アプリケーションの状態のセットアップを担当するルートと照合します。 router _map（）_メソッドは、ルートを作成するオブジェクトとしてパラメータを取る関数を渡すURLマッピングを定義するために使用されます。 _ \ {\ {link-to}} _ヘルパーはルーターをナビゲートします。

ルートを定義するには、プロジェクトフォルダで次のコマンドを使用します-

ember generate route route-name

ルートファイルapp/routes/name_of_the_route.js、app/templates/name_of_the_route.hbsのルート用テンプレート、および tests/unit/routes/route_name_of_the_test.js のユニットテストファイルを作成します。

ルーターの_map（）_メソッドを使用して、URLマッピングを定義できます。 this値でこれを呼び出して、ルートを定義するためのオブジェクトを作成できます。

Router.map(function() {
   this.route('link-page', { path: '/path-to-link-page' });
   .
   .
   this.route('link-page', { path: '/path-to-link-page' });
});

上記のコードは、ルーターマップを使用して異なるページをリンクする方法を示しています。 _linkpage_の名前とパスを引数として取ります。

以下の表は、ルートのさまざまなタイプを示しています-

S.No.	Routes & Description
1	Nested Routes 別のテンプレート内にテンプレートを定義することにより、ネストされたルートを指定します。
2	Dynamic Segments route（）メソッドの：で始まり、その後に識別子が続きます。
3	Wildcard/Globbing Routes ワイルドカードルートは、複数のURLセグメントの照合に使用されます。

例

次の例は、データを表示するためのルートを定義する方法を示しています。 _app/templates/_の下に作成された.hbsファイルを開きます。 ここでは、次のコードを使用して_routedemo.hbs_としてファイルを作成しました-

<h2>My Books</h2>
<ul>
   <li>Java</li>
   <li>jQuery</li>
   <li>JavaScript</li>
</ul>

_router.js_ファイルを開いてURLマッピングを定義します-

import Ember from 'ember';
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config

//The const declares read only variable
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

//Defines URL mappings that takes parameter as an object to create the routes
Router.map(function() {
   this.route('routedemo');
});

export default Router;

_application.hbs_ファイルを作成し、次のコードを追加します-

//link-to is a handlebar helper used for creating links
{{#link-to 'routedemo'}}BookDetails{{/link-to}}
{{outlet}}//It is a general helper, where content from other pages will
appear inside this section

出力

エンバーサーバーを実行すると、次の出力が表示されます-

Ember.jsルートの定義

出力のリンクをクリックすると、次のスクリーンショットのような結果が生成されます-

Ember.jsルートの定義