当前位置：首页 > news >正文

Angular【router路由】

news 2025/10/31 10:34:41

基本用法

生成路由模块文件

ng generate module app-routing --flat --module=app

// app-routing.module.ts`
import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';import { FooComponent } from './foo/foo.component'
import { BarComponent } from './bar/bar.component'const routes: Routes = [ // 定义路由{path: 'foo',component: FooComponent},{path: 'bar',component: BarComponent}
]
@NgModule({imports: [RouterModule.forRoot(routes)],exports: [ RouterModule ]
})
export class AppRoutingModule {}

path不能以 / 开头

设置路由出口

<h1>{{title}}</h1>
<router-outlet></router-outlet>

重定向

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },

路由跳转

标签跳转

RouterLink 指令是 Angular 声明式导航的方法。它允许你使用标准的锚点元素 (<a>)，这些元素可以与 Angular 的路由系统无缝集成。

<ul><li><a routerLink="/foo">Go Foo</a></li><li><a routerLink="/bar">Go Foo</a></li>
</ul>

编程跳转

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'@Component({selector: 'app-user',templateUrl: './user.component.html',styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {OnInit(){}constructor(private router: Router) { }goDetail() {// 页面跳转this.router.navigate(['/detail'])// 携带参数// this.router.navigate(['/detail',12])// this.router.navigate(['/detail'],{queryParams：{id:12}})}}

在组件中解析获取动态路径参数

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';@Component({selector: 'app-user',templateUrl: './user.component.html',styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {constructor(private route: ActivatedRoute,private location: Location) { }ngOnInit() {const id = this.route.snapshot.paramMap.get('id')// 获取queryParams参数// const id = this.route.snapshot.queryParams.idconsole.log(id)}}

动态路由匹配

动态路径配置

{ path: 'detail/:id', component: HeroDetailComponent }

导航链接

<a *ngFor="let hero of heroes" class="col-1-4"routerLink="/detail/{{hero.id}}">

路由后退

import { Location } from "@angular/common";
@Component(...)
export class UserComponent implements OnInit {constructor(private location: Location) {}ngOnInit() {}onBack(){this.location.back();}
}