EmberJS - Routeurs Wildcard / Globbing Routeur

Les itinéraires génériques sont utilisés pour faire correspondre les itinéraires multiples. Il attrape toutes les routes utiles lorsque l'utilisateur entre une URL incorrecte et affiche toutes les routes dans l'URL.

Syntaxe

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

Les itinéraires génériques commencent par un astérisque (*) comme indiqué dans la syntaxe ci-dessus.

Exemple

L'exemple ci-dessous spécifie les itinéraires génériques avec plusieurs segments d'URL. Ouvrez le fichier créé sous app / templates / . Ici, nous avons créé le fichier en tant que dynamic-segment.hbs et dynamic-segment1.hbs avec le code ci-dessous -

dynamic-segment.hbs

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

dynamic-segment1.hbs

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

Ouvrez le fichier router.js pour définir les mappages d'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;

Créez le fichier application.hbs et ajoutez le code suivant -

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

Sous le dossier routes , définissez le modèle pour dynamic-segment.js et dynamic-segment1.js avec le code ci-dessous -

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

Production

Exécutez le serveur de braise et vous obtiendrez la sortie ci-dessous -

Lorsque vous cliquez sur le lien sur la sortie, vous verrez la route URL comme / dynamic-segment / 101 / dynamic-segment1 / 102 -