EmberJS-ルーターワイルドカード/グロビングルート

ワイルドカードルートは、複数のルートを一致させるために使用されます。ユーザーが誤ったURLを入力したときに役立つすべてのルートをキャッチし、URL内のすべてのルートを表示します。

構文

Router.map(function() {
   this.route('catchall', {path: '/*wildcard'});
});

上記の構文に示すように、ワイルドカードルートはアスタリスク（*）記号で始まります。

例

以下の例では、複数のURLセグメントを持つワイルドカードルートを指定しています。 _app/templates/_の下に作成されたファイルを開きます。ここでは、以下のコードで_dynamic-segment.hbs_および_dynamic-segment1.hbs_としてファイルを作成しました-

*dynamic-segment.hbs*

<h3>Key One</h3>
Name: {{model.name}}
{{outlet}}

*dynamic-segment1.hbs*

<h3>Key Two</h3>
Name: {{model.name}}
{{outlet}}

_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() {

  //definig the routes
   this.route('dynamic-segment', { path: '/dynamic-segment/:myId',
      resetNamespace: true }, function() {
      this.route('dynamic-segment1', { path: '/dynamic-segment1/:myId1',
         resetNamespace: true }, function() {
         this.route('item', { path: '/item/:itemId' });
      });
   });
});

export default Router;

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

<h2 id = "title">Welcome to Ember</h2>
{{#link-to 'dynamic-segment1' '101' '102'}}Deep Link{{/link-to}}
<br>
{{outlet}}

_routes_フォルダの下で、以下のコードで_dynamic-segment.js_および_dynamic-segment1.js_のモデルを定義します-

*dynamic-segment.hbs*

import Ember from 'ember';

export default Ember.Route.extend ({
  //model() method is called with the params from the URL
   model(params) {
      return { id: params.myId, name: `Id ${params.myId}` };
   }
});

*dynamic-segment1.hbs*

import Ember from 'ember';

export default Ember.Route.extend ({
   model(params) {
      return { id: params.myId1, name: `Id ${params.myId1}` };
   }
});

出力

エンバーサーバーを実行すると、以下の出力が得られます-

Ember.jsワイルドカードルーティング

出力のリンクをクリックすると、URLルートが_/dynamic-segment/101/dynamic-segment1/102_として表示されます-

Ember.jsワイルドカードルーティング

Emberjs-router-globbing-route

EmberJS-ルーターワイルドカード/グロビングルート

構文

例

出力

目次