Angular-路由设置_angular16路由配置

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 { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

app.component.html

// 添加占位符---添加路由插座
<router-outlet></router-outlet>
1
2

app.module.ts 引入模块

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
  declarations: [],
  imports: [
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
1
2
3
4
5
6
7
8
9
10
11

路由嵌套

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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 { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

路由传参

signup.html

<!-- 路由传参 -->
<a class="login-form-botton" routerLink="/signup" [queryParams]="{name:'yiting'}">Don`t have an account？Create one here</a>
1
2

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]],
    });
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

路由动态传参

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 { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

signin.component.html

<!-- 路由传参 -->
<a class="login-form-botton" [routerLink]="['/singup','yiting']">Don`t have an account？Create one here</a>
1
2

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]],
    });
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

路由懒加载

新建lazyRoute路由模块

ng g m lazyRoute --routing=true
1

–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 { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

懒加载路由 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 { }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

路由跳转

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'
        }
      }])
      
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25