EmberJS - Router Wildcard / Rutas Globbing

Las rutas comodín se utilizan para hacer coincidir las múltiples rutas. Captura todas las rutas que son útiles cuando el usuario ingresa una URL incorrecta y muestra todas las rutas en la URL.

Sintaxis

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

Las rutas comodín comienzan con el símbolo de asterisco (*) como se muestra en la sintaxis anterior.

Ejemplo

El siguiente ejemplo especifica las rutas comodín con múltiples segmentos de URL. Abra el archivo creado en app / templates / . Aquí, hemos creado el archivo como dynamic-segmento.hbs y dinámico-segmento1.hbs con el siguiente código:

dynamic-segment.hbs

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

dynamic-segment1.hbs

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

Abra el archivo router.js para definir las asignaciones de 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;

Cree el archivo application.hbs y agregue el siguiente código:

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

En la carpeta de rutas , defina el modelo para dynamic-segmento.js y dynamic-segmento1.js con el siguiente código:

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

Salida

Ejecute el servidor Ember y obtendrá el siguiente resultado:

Cuando haga clic en el enlace en la salida, verá la ruta URL como / segmento-dinámico / 101 / segmento-dinámico1 / 102 -