# 3.1使用AngularRoute导航
## 路由内容介绍
## 路由基础
### 路由对象列表
| 名称 | 简介 |
| -------------- | --------------------------------------------------------- |
| Routes | 路由配置，保存着组件对应的URL，以及组件要展示的RouterOutlet |
| RouterOutlet | 在Html中的占位符标签，标记了路由位置的展示位置 |
| Router | 通过Router的navigate()和navigaterByUrl()方法实现导航到某个路由组件（控制器中使用） |
| RouterLink | 通过RouterLink指定要导航到的路由组件（模板中使用） |
| ActivatedRoute | 当前激活的路由对象，保存着路由信息，如路由地址、路由参数 |
### Routes
Routes对象存在于模块中，具有以下属性
* path: 浏览器URL
* component:URL对应的地址
示例：
```typescript
const routes: Routes = [
// 普通路由
{path: '', component: HomeComponent},
// 普通路由
{path: 'product', component: ProductComponent},
// 路由重定向
{path: 'prod', redirectTo: '/product', pathMatch: 'full'},
// 通配符路由。需要放到路由的最后，当路由不存在时将导航到该路由指定的组件。
{path: '**', component: Code404Component}
];
```
> 注意：path不能以 "/" 开头哦。"/"应该写在routerLink中，详情请见RouterLink对象
### RouterOutlet
RouterOutlet使用在HTML模板中，用于指定组件在页面上展示的位置。RouterOutlet在哪，路由URL对应的组件就会显示在RouterOutlet标签的下方。
```markup
```
### routerLink
routerLink使用在模板的标签中，可为一个标签添加导航，常使用于标签中。routerLink的值为数组类型，数组的第一个元素为路由URL，第二个元素为路由传递时携带的参数（可选）
```markup
主页
商品详情
带参路由
```
> 提示：当路由URL以"/"开头，表示该路由为根路由；以"./"开头，表示该路由为子路由。
### Router
Router使用在控制器中，用于导航到指定路由。常使用的方法为navigate()和navigaterByUrl()方法。
```typescript
import {Router} from '@angular/router';
constructor(private router: Router) {
}
onclick() {
this.router.navigate(['/']);
}
```
### ActivatedRoute
新建路由 路由其实是一个特殊的模块 实战：为app模块创建一个名称为app-routing的路由 1.在app模块中新建app-routing.module.ts
```
ng g module app-routing
ng g module 路由名
```
2.app-routing.module.ts内容如下
```typescript
const routes: Routes = [
{path: '', component: HomeComponent},
{path: 'product', component: ProductComponent}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule],
declarations: []
})
export class AppRoutingModule {
}
```
3.在app模块中引入app-routing模块
```typescript
@NgModule({
imports: [
AppRoutingModule
]
})
```
新建带路由的项目
```
ng new router --routing
ng new 项目名 --routing
```
\--routing 参数的作用：生成一个app-routing.module.ts路由模块并将其添加到项目根模块的依赖模块中。
```typescript
const routes:Routes={
//注意path没有/哦 {prth:'',component:HomeComponent},
{path:'**',component:Code404Component}
}
constructor（private router:Router）{
}
```
```markup
//注意有/哦 根路由 参数是一个数组
主页
./子路由
```
## 重定向路由
```typescript
{path:'',redirectTo:'/home',pathMatch:'full'}
```
## 子路由
路由的父子关系。
```typescript
{
path: 'product/:id', component: ProductComponent, children: [
{path: '', component: ProductDescComponent},
{path: 'seller/:id', component: SellerInfoComponent}
]
}
{
path: 'product/:id', component: ProductComponent, children: [
{子路由一},
{子路由二}
]
}
```
> 注意：使用子路由时，需要使用 "./" 格式。如下[销售员信息](/notes/bian-cheng-xue-xi/qian-duan/angular/3.1-shi-yong-angularroute-dao-hang.md)
## 辅助路由
路由的兄弟关系。可以存在多个辅助路由
辅助路由的配置
```typescript
// 普通路由
{path: '', component: HomeComponent},
// 辅助路由
{path: 'chat', component: ChatComponent, outlet: 'aux'}
{path: 'chat', component: ChatComponent, outlet: '辅助路由名称'}
```
辅助路由显示位置
```markup
```
辅助路由导航
```markup
开始聊天
结束聊天
开始聊天
```
> 注意：辅助路由不带 "/" 。 扩展：一个便签控制两个路由
>
> ```markup
> 开始聊天
> 开始聊天
> ```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://moluo.gitbook.io/notes/bian-cheng-xue-xi/qian-duan/angular/3.1-shi-yong-angularroute-dao-hang.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.