Angular-路由配置–创建路由模块
添加AppRoutingModule
ng generate module app-routing --flat --module=app
// --flat :与app模块同级
app-routing.module.ts
import { NgModule } from '@angular/core';
// import { CommonModule } from '@angular/common';
// 添加模块
import { SigninComponent } from "./signin/signin.component"
import { SignupComponent } from "./signup/signup.component"
import { MainContentComponent } from "./main-content/main-content.component"
// 0.路由模块初始化
// 1.配置路由表
// 请求 xxx 路径的时候,导航到 xxx 组件
// 2.配置路由出口及路由导航链接
const routes: Routes = [
{
path: 'signin', // 配置的时候不需要加 ‘/’,访问的时候需要加‘/’
component: SigninComponent
},
{
path: 'signup', // 配置的时候不需要加 ‘/’,访问的时候需要加‘/’
component: SignupComponent
},
{
path: 'index', // 配置的时候不需要加 ‘/’,访问的时候需要加‘/’
component: MainContentComponent
},
]
@NgModule({
declarations: [],
imports: [
// CommonModule
// 引用路由模块并启动
RouterModule.forRoot(routes)
// 如果用hash模式
// RouterModule.forRoot(routes,{ useHash:true }})
],
// 导出路由模块
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
// 添加占位符---添加路由插座
<router-outlet></router-outlet>
app.module.ts 引入模块
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [],
imports: [
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
路由嵌套
main-content.component.html
<div class="box">
<div>
<app-navi-bar></app-navi-bar>
</div>
<div class="main">
<div class="sidebar">
<app-side-bar></app-side-bar>
</div>
<div class="content">
<!-- <app-tag-list></app-tag-list> -->
// 嵌套子路由
<router-outlet></router-outlet>
</div>
</div>
</div>
app-routing.module.ts
import { NgModule } from '@angular/core';
import { MainContentComponent } from "./main-content/main-content.component"
import { ContactListComponent } from "./contact-list/contact-list.component"
import { TagListComponent } from "./tag-list/tag-list.component"
// 0.路由模块初始化
// 1.配置路由表
// 请求 xxx 路径的时候,导航到 xxx 组件
// 2.配置路由出口及路由导航链接
const routes: Routes = [
{
path: 'index', // 配置的时候不需要加 ‘/’,访问的时候需要加‘/’
component: MainContentComponent
},
{
path: 'contast_list', // 配置的时候不需要加 ‘/’,访问的时候需要加‘/’
component: MainContentComponent,
children: [
{
path: '', // 配置的时候不需要加 ‘/’,访问的时候需要加‘/’
component: ContactListComponent
}
]
},
{
path: 'tag_list', // 配置的时候不需要加 ‘/’,访问的时候需要加‘/’
component: MainContentComponent,
children: [
{
path: '',
component: TagListComponent
}
]
},
]
@NgModule({
declarations: [],
imports: [
// CommonModule
// 引用路由模块并启动
RouterModule.forRoot(routes)
// 如果用hash模式
// RouterModule.forRoot(routes,{ useHash:true }})
],
exports: [RouterModule]
})
export class AppRoutingModule { }
路由传参
signup.html
<!-- 路由传参 -->
<a class="login-form-botton" routerLink="/signup" [queryParams]="{name:'yiting'}">Don`t have an account?Create one here</a>
signup.component.ts
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
// 构造器定义route
constructor(
private route:ActivatedRoute
) { }
ngOnInit(): void {
// 获取路由参数
this.route.queryParamMap.subscribe(query => {
query.get('name')
})
this.validateForm = this.fb.group({
userName: [null, [Validators.required]],
password: [null, [Validators.required]],
});
}
}
路由动态传参
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router"
const routes: Routes = [
{
path: '',
redirectTo: 'signin',//当请求根路径的时候,跳转到cantacts的页面
pathMatch: "full"// 必须玩全匹配到路径的时候才能重定向
},
{
path: 'signin/:name',
component: SigninComponent
},
{
path: 'signup',
component: SignupComponent
},
{
path: '**',
component: NotFundComponent
},
]
@NgModule({
declarations: [],
imports: [
RouterModule.forRoot(routes, { useHash: true })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
signin.component.html
<!-- 路由传参 -->
<a class="login-form-botton" [routerLink]="['/singup','yiting']">Don`t have an account?Create one here</a>
signup.component.ts
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
// 构造器定义route
constructor(
private route:ActivatedRoute
) { }
ngOnInit(): void {
// 获取路由参数
this.route.paramMap.subscribe(query => {
query.get('name')
})
this.validateForm = this.fb.group({
userName: [null, [Validators.required]],
password: [null, [Validators.required]],
});
}
}
路由懒加载
新建lazyRoute路由模块
ng g m lazyRoute --routing=true
–routing=true 创建route模块同时创建路由模块配置
lazyRoute路由模块配置
lazy-route-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainContentComponent } from "../views/main-content/main-content.component"
import { ContactListComponent } from "../views/contactPage/contact-list/contact-list.component"
const routes: Routes = [
{
path: 'index',
component: MainContentComponent
},
{
path: 'contast_list',
component: MainContentComponent,
children: [
// 嵌套子路由
{
path: '',
component: ContactListComponent
}
]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LazyRouteRoutingModule { }
懒加载路由 RouterModule.forChild(routes)
根路由 RouterModule.forRoot(routes)
app-routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from "@angular/router"
import { SigninComponent } from "./views/signin/signin.component"
import { SignupComponent } from "./views/signup/signup.component"
import { NotFundComponent } from "./views/not-fund/not-fund.component"
// 0.路由模块初始化
// 1.配置路由表
// 请求 xxx 路径的时候,导航到 xxx 组件
// 2.配置路由出口及路由导航链接
const routes: Routes = [
// 重定向
{
path: '',
redirectTo: 'signin',//当请求根路径的时候,跳转到cantacts的页面
pathMatch: "full"// 必须玩全匹配到路径的时候才能重定向
},
{
path: 'signin',
component: SigninComponent
},
// 路由懒加载
{
path: '',
loadChildren: () => import('./lazy-route/lazy-route.module').then(m => m.LazyRouteModule)
},
{
path: '**',
component: NotFundComponent
},
]
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forRoot(routes, { useHash: true })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
路由跳转
import { Router } from "@angular/router"
@Component({
selector: 'app-signin',
templateUrl: './signin.component.html',
styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit {
constructor(
private router: Router
) { }
submitForm(): void {
// 不传参
this.router.navigate(['/index'])
// 传参
this.router.navigate(['/index', {
queryParams: {
name:'yiting'
}
}])
}
}