EmberJS - Definición de rutas

El enrutador compara la URL actual con las rutas responsables de mostrar la plantilla, cargar datos y configurar un estado de la aplicación. El método router map () se utiliza para definir las asignaciones de URL que pasan una función que toma un parámetro como un objeto para crear las rutas. El ayudante {{link-to}} navega por el enrutador.

Para definir una ruta, use el siguiente comando en la carpeta de su proyecto:

ember generate route route-name

Crea el archivo de ruta app / routes / name_of_the_route.js, una plantilla para la ruta en app / templates / name_of_the_route.hbs, y un archivo de prueba unitaria en tests/unit/routes/route_name_of_the_test.js.

Puede definir las asignaciones de URL utilizando el método map () del enrutador. Esto se puede invocar con el valor this para crear un objeto para definir la ruta.

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

El código anterior muestra cómo vincular las diferentes páginas utilizando el mapa del enrutador. Toma el nombre de la página de enlace y la ruta como argumento.

La siguiente tabla muestra diferentes tipos de rutas:

S.No.	Rutas y descripción
1	Rutas anidadas Especifica las rutas anidadas definiendo una plantilla dentro de otra plantilla.
2	Segmentos dinámicos Comienza con un: en el método route () seguido de un identificador.
3	Rutas comodín / globbing Las rutas comodín se utilizan para hacer coincidir los múltiples segmentos de URL.

Ejemplo

El siguiente ejemplo muestra cómo definir una ruta para mostrar datos. Abra el archivo .hbs creado en app / templates / . Aquí, hemos creado el archivo como routedemo.hbs con el siguiente código:

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

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() {
   this.route('routedemo');
});

export default Router;

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

//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

Salida

Ejecute el servidor ember y recibirá el siguiente resultado:

Al hacer clic en el enlace de la salida, se generará un resultado como en la siguiente captura de pantalla:

↰ Previous page