Angular 路由

简单路由配置

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

路由器需要先配置才会有路由信息。

1. 定义路由

路由器必须用“路由定义”的列表进行配置。
每个定义都被翻译成了一个Route对象。该对象有一个 path 字段，表示该路由中的 URL 路径部分，和一个 component 字段，表示与该路由相关联的组件。

每个 Route 都会把一个 URL 的 path 映射到一个组件。 path 不能以斜杠（/）开头。 路由器会为解析和构建最终的 URL，这样当你在应用的多个视图之间导航时，可以任意使用相对路径和绝对路径。
路由器使用先匹配者优先的策略来选择路由。通配符路由 是路由配置中最没有特定性的那个，因此务必确保它是配置中的最后一个路由。

注意点：
重定向路由，即空路径路由，需要一个 pathMatch 属性，来告诉路由器如何用 URL 去匹配路由的路径，否则路由器就会报错。

从技术角度说，pathMatch = ‘full’ 导致 URL 中剩下的、未匹配的部分必须等于’’。

pathMatch 的另一个可能的值是 ‘prefix’，它会告诉路由器：当剩下的URL 以这个跳转路由中的 prefix 值开头时，就会匹配上这个跳转路由。

注意： 空路由和通配符路由的定义和用法详见下面的示例。

2. 注册路由器

要使用路由器，必须先注册来自 @angular/router 包中的 RouterModule。定义一个路由数组 appRoutes 并把它传给 RouterModule.forRoot() 方法(注：在根路由中使用此方法)。它会返回一个模块，其中包含配置好的 Router 服务提供商，以及路由库所需的其它提供商。一旦启动了应用，Router 就会根据当前的浏览器 URL 进行首次导航。

注意： RouterModule.forRoot() 方法是用于注册全应用级提供商的编码模式.

3. 添加路由出口

<router-outlet></router-outlet>

简单路由配置示例

src/app/app.module.ts 文件内容

// 定义路由数组
const appRoutes: Routes = [{path: 'login',component: LoginComponent,data: { title: '登录模块' }},{ path: 'welcome',component: WelcomeComponent,data: { title: '欢迎组件'}},{ path: '',redirectTo: '/login',pathMatch: 'full'},{ path: '**',component: PageNotFoundComponent}
];@NgModule({imports: [RouterModule.forRoot(appRoutes)// other imports here],...
})
export class AppModule { }

app.module.ts 文件内容说明：

第一个路由中的data 属性用来存放于每个具体路由有关的任意信息。该数据可以被任何一个激活路由访问，并能用来保存诸如页标题、面包屑以及其它静态只读数据。
第三个路由中的空路径(’’)表示应用的默认路径，当 URL 为空时就会访问那里，因此它通常会作为起点。这个默认路由会重定向到 URL /login，并显示 LoginComponent。
最后一个路由中的 ** 路径是一个通配符。当所请求的 URL 不匹配前面定义的路由表中的任何路径时，路由器就会选择此路由。这个特性可用于显示“404 - Not Found”页，或自动重定向到其它路由。

注意：

每个 Route 都会把一个 URL 的 path 映射到一个组件。 path 不能以斜杠（/）开头。 路由器会为解析和构建最终的 URL，这样当你在应用的多个视图之间导航时，可以任意使用相对路径和绝对路径。
这些路由的定义顺序是刻意如此设计的。路由器使用先匹配者优先的策略来匹配路由，所以，具体路由应该放在通用路由的前面。 在上面的配置中，带静态路径的路由被放在了前面，后面是空路径路由，因此它会作为默认路由。而通配符路由被放在最后面，这是因为它能匹配上每一个 URL，因此应该只有在前面找不到其它能匹配的路由时才匹配它。

路由模块

路由模块是设计选择，它的价值在配置很复杂，并包含专门守卫和解析器服务时尤其明显。在配置很简单时，它可能看起来很多余。

将路由配置重构为路由模块

在 /app 目录下创建一个 AppRouting 模块，以包含路由配置。

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

第1步： 在 AppRoutingModule 中配置路由信息，将 RouterModule 添加到该模块的 exports 数组中，以便再次导出它。
第2步： 将 AppRoutingModule 导入AppModule 模块。

导入路由的顺序

在 app.module.ts 文件的imports数组中，AppRoutingModule 是最后一个。

子路由配置

1. 定义路由

示例如下：

const crisisCenterRoutes: Routes = [{path: 'crisis-center',component: CrisisCenterComponent,children: [{path: '',component: CrisisListComponent,children: [{path: ':id',component: CrisisDetailComponent},{path: '',component: CrisisCenterHomeComponent}]}]}
];

在上述示例中，路由对象最外层的 path 表示一级路由，children 数组中的路由为次一级路由。

2. 注册路由器

在子路由模块中注册路由器使用 RouterModule.forChild() 方法。

3. 将子路由模块导入到根路由模块中

将子路由模块导入到 AppModule 的 imports 数组中，放在 AppRoutingModule 前面。

路由懒加载(惰性加载路由配置)

将子路由定义的children 属性替换为 loadChildren 属性。 loadChildren 属性接收一个函数，该函数使用浏览器内置的动态导入语法 import(’…’) 来惰性加载代码，并返回一个承诺（Promise）。

惰性加载和重新配置工作只会发生一次，也就是在该路由首次被请求时。在后续的请求中，该模块和路由都是立即可用的。

  {path: 'table',loadChildren: () => import('./table/table.module').then(m => m.TableModule)}

{ path: 'table',loadChildren: 'app/routes/table/table.module#TableModule'
}

在定义路由时，在 loadChildren 字段值中可以使用绝对路径，也可以使用相对路径。

当使用绝对路径时，NgModule 的文件位置必须以 src/app 开头，以便正确解析。

—— END ——

Angular 路由相关推荐

Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...
angular 路由快照和 aggrid 结合后，导致aggrid 表头消失的问题
一,路由快照简述 1. angular的路由快照,简单的说,就是记录路由访问状态.比如当访问过A路由加载过A组件之后,再次访问A路由,A组件不会重新加载 (即不会重新渲染页面,不会重新请求接口). ...
angular 路由项目例子
angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...
angular路由详解
angular路由路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
Angular路由复用策略出现Cannot reattach ActivatedRouteSnapshot created from a different route错误
复用代码自己写的angular路由复用,用着基本挺好. 定义的的顺序就是复用的逻辑,离开某路由页面时,shouldDetach觉得可复用后,store去保存路由,再次进入页面时,shouldAtta ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
Angular路由--基本用法
2019独角兽企业重金招聘Python工程师标准>>> 路由就是将链接和组件联系起来的桥梁,最基本的用法是将一个URL所对应的组件在页面中显示出来,这里说明一下使用路由的基本流程内容 ...
Angular路由--模块预加载
2019独角兽企业重金招聘Python工程师标准>>> 预加载是介于直接加载.惰加载的一种方式. 预加载的工作原理在每次成功的导航后,路由器会在自己的配置中查找尚未加载并且可以预加 ...
angular路由移除#号(跟nginx)
刚进公司,公司使用的angular.js(1.3.0),主管跟我说要我移除angular项目访问路径URL里的#号移除(针对百度seo问题后来发现angular天生不适合做seo). angularj ...

Angular 路由

Angular 路由

简单路由配置

1. 定义路由

2. 注册路由器

3. 添加路由出口

简单路由配置示例

路由模块

将路由配置重构为路由模块

导入路由的顺序

子路由配置

1. 定义路由

2. 注册路由器

3. 将子路由模块导入到根路由模块中

路由懒加载(惰性加载路由配置)

Angular 路由相关推荐

最新文章

热门文章