Angular 路由使用整理（一）

ゞ浴缸里的玫瑰 2022-06-01 04:58 161阅读 0赞

Angular的路由器能让用户从一个视图导航到另一个视图。

Angular2以及以后的版本路由器使用浏览器的history.pushState 进行导航，这样就和多网页应用链接保持一致了，而不是Angular1.x中还用hash(\#)风格处理前端路由。

**一、基础知识**

大多数带路由的应用都要在**`index.html`**的`<head>`标签下先添加一个`<base>`元素，来告诉路由器该如何合成导航用的URL。

**二、使用先导入模块**

在app.module.ts中导入路由模块

import { RouterModule, Routes } from '@angular/router';

**三、配置路由定义和路由出口**

//定义路由配置
    const appRoutes: Routes = [
      { path: 'add', component: MenuAddComponent },
      { path: 'detail/:id', component: MenuDetailComponent },
      { path: 'home', component: EmptyComponent ，data:{title:'测试1'}},
      { path: '', redirectTo: '/home', pathMatch: 'full' },  //空目录，重定向处理
      { path: '**', component: EmptyComponent } //通配符，其他路由失败的，会跳转到这个视图
    ];

每个带路由的Angular应用都有一个Router(路由器)服务的单例对象。当浏览器的URL变化时，路由器会查找对应的Route（路由），并据此决定改显示哪儿个组件。

使用RouterModule.forRoot() 方法来注册路由定义数组。

@NgModule({
      declarations: [
        AppComponent,
        MenuAddComponent,
        MenuDetailComponent,
        EmptyComponent,
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot(appRoutes)
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

路由定义说明：

1.每个Route都会把一个URL的path映射到一个组件。注意，path不能以斜杠(/)开头。

2.路由的:id是一个路由参数占位符，类似MVC中\{id\}  
3.路由中的data属性，用来存放每个具体忽悠有关的信息。使用resolve守卫来获取动态数据.

4.空路径('')表示应用的默认路径，（\*\*）通配符，最后制定，路由解析也和MVC中安定义顺序先定义先匹配。

路由出口:路由结果内容都显示在这个位置。

<router-outlet></router-outlet>

**四、路由链接、路由状态**

超链接的RouterLink指令让路由器以控制这个a元素，固定连接使用字符串routerLink绑定，如果需要加动态的导航，那就把它绑定到一个返回连接参数数组的模板表达式，路由器会把这个数组解析成完成的URL。

RouterLinkActive指令可以帮助用户绑定当前活动路由的样式名称。

路由状态

在导航的每个生命周期完成时，路由器会构建出一个ActivedRoute组成的树，他表示路由的当前状态。我们可以在应用的任何地方用Router服务及其routerState属性来访问当前RouterState值。

路由状态为我们提供了从任意激活路由开始向上或向下遍历路由树的一种方式，以获得关于父、子、兄弟的路由信息。

获取路由参数

import {ActivatedRoute} from "@angular/router";
       
       export class AboutList {
           id: Object;
           constructor(public route:ActivatedRoute) {
               this.id = {};
           }
           ngOnInit() {
               this.route.params.subscribe(params => {
                   this.id = params  // {id: "xxx"}
               });
           }
       }

js跳转路由处理

import {Router} from "@angular/router";
        
        constructor(public router: Router) {
        // 相当于window.location.href，界面跳转
            router.navigateByUrl('home');
        }

**总结一下：**

<table style="margin-bottom:32px; color:rgb(84,110,122); font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;; font-size:14px"> 
 <tbody> 
 <tr> 
 <th style="padding:16px 32px; margin:0px 0px 24px; font-size:16px; line-height:28px; border-bottom-color:rgb(236,239,241); text-align:left; border-right-color:rgb(236,239,241); max-width:100px"> <p style="margin-bottom:0px; font-weight:400; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 路由器部件 </th> 
 <th style="padding:16px 32px; margin:0px 0px 24px; font-size:16px; line-height:28px; border-bottom-color:rgb(236,239,241); text-align:left; border-right-color:rgb(236,239,241); max-width:100px"> <p style="margin-bottom:0px; font-weight:400; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 含义 </th> 
 </tr> 
 <tr> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> <code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">Router</code>（路由器） </td> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 为激活的URL显示应用组件。管理从一个组件到另一个组件的导航 </td> 
 </tr> 
 <tr> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> <code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">RouterModule</code>（路由器模块） </td> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 一个独立的Angular模块，用于提供所需的服务提供商，以及用来在应用视图之间进行导航的指令。 </td> 
 </tr> 
 <tr> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> <code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">Routes</code>（路由数组） </td> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 定义了一个路由数组，每一个都会把一个URL路径映射到一个组件。 </td> 
 </tr> 
 <tr> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> <code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">Route</code>（路由） </td> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 定义路由器该如何根据URL模式（pattern）来导航到组件。大多数路由都由路径和组件类构成。 </td> 
 </tr> 
 <tr> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> <code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">RouterOutlet</code>（路由出口） </td> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 该指令（<code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">&lt;router-outlet&gt;</code>）用来标记出路由器该在哪里显示视图。 </td> 
 </tr> 
 <tr> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> <code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">RouterLink</code>（路由链接） </td> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 该指令用来把一个可点击的HTML元素绑定到路由。 点击带有绑定到字符串或链接参数数组的<code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">routerLink</code>指令的元素就会触发一次导航。 </td> 
 </tr> 
 <tr> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> <code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">RouterLinkActive</code>（活动路由链接） </td> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 当HTML元素上或元素内的<code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">routerLink</code>变为激活或非激活状态时，该指令为这个HTML元素添加或移除CSS类。 </td> 
 </tr> 
 <tr> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> <code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">ActivatedRoute</code>（激活的路由） </td> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 为每个路由组件提供提供的一个服务，它包含特定于路由的信息，比如路由参数、静态数据、解析数据、全局查询参数和全局碎片（fragment）。 </td> 
 </tr> 
 <tr> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> <code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">RouterState</code>（路由器状态） </td> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 路由器的当前状态包含了一棵由程序中激活的路由构成的树。它包含一些用于遍历路由树的快捷方法。 </td> 
 </tr> 
 <tr> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 链接参数数组 </td> 
 <td style="padding:16px 32px; line-height:24px; border-bottom-color:rgb(236,239,241)"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 这个数组会被路由器解释成一个路由操作指南。我们可以把一个<code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">RouterLink</code>绑定到该数组，或者把它作为参数传给<code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">Router.navigate</code>方法。 </td> 
 </tr> 
 <tr> 
 <td style="padding:16px 32px; line-height:24px; border-width:initial; border-style:none; border-color:initial"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 路由组件 </td> 
 <td style="padding:16px 32px; line-height:24px; border-width:initial; border-style:none; border-color:initial"> <p style="margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:&quot;Helvetica Neue&quot;,Arial,STHeiti,&quot;Microsoft YaHei&quot;,sans-serif,Helvetica,DroidSansFallback,FreeSans,Arimo,&quot;Droid Sans&quot;,&quot;wenquanyi micro hei&quot;,&quot;Hiragino Sans GB&quot;,&quot;Hiragino Sans GB W3&quot;!important"> 一个带有<code style="font-family:Monaco,&quot;Lucida Console&quot;,monospace; font-size:14.4px; color:rgb(0,121,107); padding-top:0px; padding-bottom:0px">RouterOutlet</code>的Angular组件，它根据路由器的导航来显示相应的视图。 </td> 
 </tr> 
 </tbody> 
</table>

[Angular CLI ng常用命令整理][Angular CLI ng]  
[Angular 绑定语法简介][Angular]

[Angular中的模板和表达式简介][Angular 1]

更多参考：

[https://segmentfault.com/a/1190000007682605][https_segmentfault.com_a_1190000007682605]

[http://blog.csdn.net/u010130282/article/details/53613277][http_blog.csdn.net_u010130282_article_details_53613277]

[Angular CLI ng]: http://blog.csdn.net/u011127019/article/details/79114886
[Angular]: http://blog.csdn.net/u011127019/article/details/78851188
[Angular 1]: http://blog.csdn.net/u011127019/article/details/78849828
[https_segmentfault.com_a_1190000007682605]: https://segmentfault.com/a/1190000007682605
[http_blog.csdn.net_u010130282_article_details_53613277]: http://blog.csdn.net/u010130282/article/details/53613277