EmberJS - Definindo Rotas

O roteador combina o URL atual com as rotas responsáveis por exibir o modelo, carregar dados e configurar o estado do aplicativo. O método router map () é usado para definir os mapeamentos de URL que passam uma função que leva parâmetro como um objeto para criar as rotas. O auxiliar {{link-to}} navega pelo roteador.

Para definir uma rota, use o seguinte comando na pasta do seu projeto -

ember generate route route-name

Ele cria o arquivo de rota app / routes / name_of_the_route.js, um modelo para a rota em app / templates / name_of_the_route.hbs, e um arquivo de teste de unidade em tests/unit/routes/route_name_of_the_test.js.

Você pode definir os mapeamentos de URL usando o método map () do roteador. Isso pode ser invocado com este valor para criar um objeto para definir a rota.

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

O código acima mostra como vincular as diferentes páginas usando o mapa do roteador. Leva o nome e o caminho da página de link como argumento.

A tabela abaixo mostra diferentes tipos de rotas -

S.No.	Rotas e descrição
1	Rotas aninhadas Ele especifica as rotas aninhadas definindo um modelo dentro de outro modelo.
2	Segmentos dinâmicos Ele começa com um: no método route () seguido por um identificador.
3	Rotas curinga / globbing As rotas curinga são usadas para combinar os vários segmentos de URL.

Exemplo

O exemplo a seguir mostra como definir uma rota para a exibição de dados. Abra o arquivo .hbs criado em app / templates / . Aqui, criamos o arquivo como routedemo.hbs com o seguinte código -

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

Abra o arquivo router.js para definir mapeamentos 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;

Crie o arquivo application.hbs e adicione o seguinte 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

Resultado

Execute o servidor ember e você receberá a seguinte saída -

Quando você clica no link da saída, um resultado como na imagem a seguir será gerado -

↰ Previous page