EmberJS - Définition des itinéraires

Le routeur fait correspondre l'URL actuelle avec les routes responsables de l'affichage du modèle, du chargement des données et de la configuration d'un état d'application. La méthode router map () est utilisée pour définir les mappages d'URL qui passent une fonction qui prend un paramètre comme objet pour créer les routes. L' assistant {{link-to}} navigue dans le routeur.

Pour définir un itinéraire, utilisez la commande suivante dans votre dossier de projet -

ember generate route route-name

Il crée le fichier de route app / routes / name_of_the_route.js, un modèle pour la route à app / templates / name_of_the_route.hbs, et un fichier de test unitaire à tests/unit/routes/route_name_of_the_test.js.

Vous pouvez définir les mappages d'URL en utilisant la méthode map () du routeur. Cela peut être appelé avec la valeur this pour créer un objet pour définir l'itinéraire.

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

Le code ci-dessus montre comment lier les différentes pages en utilisant la carte du routeur. Il prend le nom et le chemin de la page de lien comme argument.

Le tableau ci-dessous montre différents types d'itinéraires -

S.No.	Itinéraires et description
1	Routes imbriquées Il spécifie les routes imbriquées en définissant un modèle dans un autre modèle.
2	Segments dynamiques Il commence par un: dans la méthode route () suivi d'un identifiant.
3	Routes génériques / globales Les itinéraires génériques sont utilisés pour faire correspondre les multiples segments d'URL.

Exemple

L'exemple suivant montre comment définir un itinéraire pour afficher des données. Ouvrez le fichier .hbs créé sous app / templates / . Ici, nous avons créé le fichier sous le nom routedemo.hbs avec le code suivant -

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

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

export default Router;

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

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

Production

Exécutez le serveur de braises et vous recevrez la sortie suivante -

Lorsque vous cliquez sur le lien de la sortie, un résultat comme dans la capture d'écran suivante sera généré -