Roteamento de caminho absoluto
Existem 2 métodos para navegação .navigate()
e.navigateByUrl()
Você pode usar o método .navigateByUrl()
para roteamento de caminho absoluto:
import {Router} from '@angular/router';
constructor(private router: Router) {}
navigateToLogin() {
this.router.navigateByUrl('/login');
}
Você coloca o caminho absoluto para a URL do componente para o qual deseja navegar.
Nota: Sempre especifique o caminho absoluto completo ao chamar o roteador navigateByUrl
método . Caminhos absolutos devem começar com um líder/
// Absolute route - Goes up to root level
this.router.navigate(['/root/child/child']);
// Absolute route - Goes up to root level with route params
this.router.navigate(['/root/child', crisis.id]);
Roteamento de caminho relativo
Se você deseja usar o roteamento de caminho relativo, use o .navigate()
método
NOTA: É um pouco pouco intuitivo como o roteamento funciona, principalmente as rotas pai, irmão e filho:
// Parent route - Goes up one level
// (notice the how it seems like you're going up 2 levels)
this.router.navigate(['../../parent'], { relativeTo: this.route });
// Sibling route - Stays at the current level and moves laterally,
// (looks like up to parent then down to sibling)
this.router.navigate(['../sibling'], { relativeTo: this.route });
// Child route - Moves down one level
this.router.navigate(['./child'], { relativeTo: this.route });
// Moves laterally, and also add route parameters
// if you are at the root and crisis.id = 15, will result in '/sibling/15'
this.router.navigate(['../sibling', crisis.id], { relativeTo: this.route });
// Moves laterally, and also add multiple route parameters
// will result in '/sibling;id=15;foo=foo'.
// Note: this does not produce query string URL notation with ? and & ... instead it
// produces a matrix URL notation, an alternative way to pass parameters in a URL.
this.router.navigate(['../sibling', { id: crisis.id, foo: 'foo' }], { relativeTo: this.route });
Ou se você só precisa navegar dentro do caminho da rota atual, mas para um parâmetro de rota diferente:
// If crisis.id has a value of '15'
// This will take you from `/hero` to `/hero/15`
this.router.navigate([crisis.id], { relativeTo: this.route });
Matriz de parâmetros de link
Uma matriz de parâmetros de link contém os seguintes ingredientes para a navegação do roteador:
- O caminho da rota para o componente de destino.
['/hero']
- Parâmetros de rota obrigatórios e opcionais que entram no URL da rota.
['/hero', hero.id]
ou['/hero', { id: hero.id, foo: baa }]
Sintaxe semelhante a diretório
O roteador suporta sintaxe semelhante a diretório em uma lista de parâmetros de link para ajudar a guiar a pesquisa de nome de rota:
./
ou nenhuma barra inicial é relativa ao nível atual.
../
para subir um nível no caminho da rota.
Você pode combinar a sintaxe relativa da navegação com um caminho ancestral. Se você precisar navegar para uma rota de irmão, poderá usar o../<sibling>
convenção para subir um nível e depois subir e descer o caminho da rota de irmão.
Notas importantes sobre a relativa irrigação
Para navegar por um caminho relativo com o Router.navigate
método, você deve fornecer oActivatedRoute
ao roteador o conhecimento de onde você está na árvore de rotas atual.
Após a matriz de parâmetros do link, adicione um objeto com uma relativeTo
propriedade configurada aoActivatedRoute
. O roteador calcula o URL de destino com base na localização da rota ativa.
Da documentação oficial do roteador angular