路由和导航

一、配置路由

找到 app-routing.module.ts 配置路由

import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';
const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent},
  {path: 'newscontent/:id', component: NewscontentComponent},
  {
  path: '',
  redirectTo: '/home',
  pathMatch: 'full'
  }
];

1
2
3
4
5
6
7
8
9
10
11
12
13

找到 app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由

<h1>
<a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>

1
2
3
4
5

二、默认路由

//匹配不到路由的时候加载的组件 或者跳转的路由
{
path: '**', /*任意的路由*/
// component:HomeComponent
redirectTo:'home'
}

1
2
3
4
5
6

三、routerLinkActive 设置routerLink 默认选中路由

<!-- 未选中 -->
<h1>
<a routerLink="/home" routerLinkActive="active">首页</a>
<a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>
<!-- 点击选中状态 -->
<h1>
<a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>
<a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>
</h1>
<style>
.active{
  color:red
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

四、get路由传值

跳转

<li *ngFor="let item of list;let key=index">
  <a [routerLink]="[ '/newcontent']" [queryParams]="{aid:key}">{{key}}---{{item}}</a>
</li>

1
2
3

接收

import { ActivatedRoute} from '@angular/router';
  constructor(public route:ActivatedRoute) { }
  this.route.queryParams.subscribe((data)=> {
    console.log(data)
  })

1
2
3
4
5

五、动态路由传值

配置动态路由

const routes: Routes = [
  //动态绑定路由值
  {path: 'newscontent/:id', component: NewscontentComponent},
];

1
2
3
4

跳转传值

<a [routerLink]="[ '/newscontent/',aid]">跳转到详情</a>
<a routerLink="/newscontent/{{aid}}">跳转到详情</a>

1
2

获取动态路由的值

import { ActivatedRoute} from '@angular/router';
constructor( private route: ActivatedRoute) {}
ngOnInit() {
  console.log(this.route.params);
  this.route.params.subscribe(data=>this.id=data.id);
}

1
2
3
4
5
6

六、动态路由的 js 跳转

引入声明模块

  import { Router } from '@angular/router';
  constructor(private router: Router) {}

1
2

跳转

this.router.navigate(['/productcontent/', '123'])

七、路由 get 传值 js 跳转

引入 NavigationExtras

import { Router,NavigationExtras } from '@angular/router';

定义一个 goNewsContent 方法执行跳转，用 NavigationExtras 配置传参

goNewsContent(){
  let navigationExtras: NavigationExtras = {
    queryParams: { 'session_id': '123' },
    fragment: 'anchor'
  };
  this.router.navigate(['/news'],navigationExtras);
  //简写
  this.router.navigate(['/productcontent'],{
    queryParams: {'aid':213}
  });
}

1
2
3
4
5
6
7
8
9
10
11

获取 get 传值

constructor(private route: ActivatedRoute) {
  console.log(this.route.queryParams);
}

1
2
3

八、嵌套路由(父子路由)

创建引入组件,配置路由

//app-routing.module.ts
import { NesteHomeComponent } from './components/Nestedrouting/neste-home/neste-home.component';
  import { HomeWelcomeComponent } from './components/Nestedrouting/neste-home/home-welcome/home-welcome.component';
  import { HomeSettingComponent } from './components/Nestedrouting/neste-home/home-setting/home-setting.component';
import { NesteproductComponent } from './components/Nestedrouting/nesteproduct/nesteproduct.component';
  import { ProductPcateComponent } from './components/Nestedrouting/nesteproduct/product-pcate/product-pcate.component';
  import { ProductPlistComponent } from './components/Nestedrouting/nesteproduct/product-plist/product-plist.component';
const routes: Routes = [
  {
    path: '',
    redirectTo: 'nestehome',
    pathMatch: 'full'
  },
  {
    path: 'nestehome', component: NesteHomeComponent,
    children: [
      { path: 'homeWelcome', component: HomeWelcomeComponent },
      { path: 'homeSetting', component: HomeSettingComponent },
      { path: '**', redirectTo: 'homeWelcome'}
    ]
  },
  {
    path: 'nesteproduct', component: NesteproductComponent,
    children: [
      { path: 'pcate', component: ProductPcateComponent },
      { path: 'plist', component: ProductPlistComponent },
      { path: '**', redirectTo: 'pcate'}

    ]
  },
  //匹配不到路由的时候加载的组件 或者跳转的路由
  {
    path: '**', /*任意的路由*/
    // component:HomeComponent
    redirectTo: 'nestehome'
  }
];

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

父组件中引用路由

<!-- app.component.html -->
<h2>嵌套路由</h2>
<header>
  <div class="link">
    <a [routerLink]="[ '/nestehome' ]" routerLinkActive="active">首页</a>
    <a routerLink="/nesteproduct" routerLinkActive="active">商品</a>
  </div>
</header>
<router-outlet></router-outlet>

<!-- neste-home.component.html -->
<div class="conent">
  <div class="left">
    <a [routerLink]="[ '/nestehome/homeWelcome' ]">欢迎首页</a>
    <br><br>
    <a [routerLink]="[ '/nestehome/homeSetting' ]">系统设置</a>
  </div>
  <div class="right">
    <router-outlet></router-outlet>
  </div>
</div>

<!-- style.less -->
<style>
.conent {
  width: 100%;
  height: 500px;
  margin-top: 10px;
  display: flex;
  .left {
    width: 200px;
    height: 500px;
    text-align: center;
    padding: 20px 0;
    border: 2px solid #000;
  }
  .right {
    flex: 1;
    margin-left: 10px;
    padding: 20px;
    border: 2px solid rgb(22, 19, 165);
  }
}
</style>

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

← Angular 中的数据交互（get jsonp post）案例无人点餐系统 →

# 路由和导航

# 一、配置路由

# 二、默认路由

# 三、routerLinkActive 设 置routerLink 默认选中路由

# 四、get路由传值

# 五、动态路由传值

# 六、动态路由的 js 跳转

# 七、路由 get 传值 js 跳转

# 八、嵌套路由(父子路由)