const routes: Routes = [
{path:'', redirectTo: '/home', pathMatch:'full'},
{path:'home', component: HomeComponent }, // 默认展示HomeComponnet
{path:'about', component: AboutComponent}
];
作用就是可以指定访问某个路由时跳转到其它路由，如上述所示当访问的是根路由时则直接重定向到home路由，展示HomeComponent组件的内容。pathMatch: 'full'表示全部符合才重定向还有个取值是'prefix'，即前缀符合即重定向
例如redirectTo: '/a' 则表示以/a/开头或者/a的
/a/b 跳转
/a 跳转
/affdd 不跳转
/aa/bb 不跳转
2.通配符路由配置
const routes: Routes = [
{path:'', redirectTo: '/home', pathMatch:'full'},
{path:'home', component: HomeComponent }, // 默认展示HomeComponnet
{path:'about', component: AboutComponent},
{path:'**', component: Code404Component}
// {path:'**', redirectTo: '/home'}
];
用于匹配任意路由，一般访问不存在的路由时会用到会执行这个这个一定要放到路由配置的最后面，会拦截掉其它路由
可以使用404组件展示，也可以选择重定向到首页
3.路由子路由配置
前提：生成两个组件BuyerListComponent，SellerListComponent，将这两个组件显示在股票详情组件之内。
const routes: Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomeComponent },
{
path: 'stock/:id', component: StockComponent, data: [{isPro: true}],
children: [
{path: '', component: BuyerListComponent},
{path: 'seller/:id', component: SellerListComponent}
],
},
{path: '**', component: Code404Component}
];
子路由可以无限级的嵌套的，一个组件可以是一个主组件，也可以是子组件4.辅助路由配置
声明一个辅助路由，需要三步：
在组件模板上声明一个主插座，和一个带有name属性的插座,如下所示：
<router-outlet></router-outlet> // 主插座
<router-outlet name="aux"></router-outlet> // 辅助插座
在路由配置上需要配置这个叫“aux”的插座可以显示哪些组件,如下：
{path:'xxx',component:XxxComponent,outlet:'aux'}
{path:'yyy',component:YyyComponent,outlet:'aux'}
在路由导航时，在路由到某一个地址时
<a [routerLink]="['/home',{outlets:{aux:'xxx'}}]">Xxx</a>
<a [routerLink]="['/product',{outlets:{aux:'yyy'}}]">yyy</a>
注解：
<router-outlet></router-outlet>显示‘/home’对应的组件，
<router-outlet name="aux"></router-outlet> 显示xxx组
（2）举例实现辅助路由思路：
一：在app组件的模板上再定义一个插座来显示在线咨询组件
二：单独开发一个在线咨询组件，只显示在新定义的插座上
三：通过路由参数控制新的辅助插座是否显示在线咨询组件
开始：
A 实现思路一： 在app.component.html
<a [routerLink]='["/home"]'>主页</a> <a [routerLink]='["/stock",1]' >股票详情</a> <input type="button" value="股票详情" (click)="toStockDetail()" /> <router-outlet></router-outlet> <router-outlet name="aux"></router-outlet>B 生成新的咨询组件 consult
首先，consult.component.html中：
<textarea placeholder="请输入咨询问题" class="consult"></textarea>
其次配置路由：
{path: 'consult', component: ConsultComponent, outlet: 'aux'},
C 在app.component.html加入：
<a [routerLink]='["/home"]'>主页</a>
<a [routerLink]='["/stock",1]' >股票详情</a>
<input type="button" value="股票详情" (click)="toStockDetail()" />
<a [routerLink]="[{outlets:{aux:'consult'}}]">开始咨询</a>
<a [routerLink]="[{outlets:{aux:null}}]">结束咨询</a>
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>
此时，完成实现辅助路由补充
<a [routerLink]="[{outlets:{primary:'home'aux:'consult'}}]">开始咨询</a>
点击开始咨询主路由跳到home组件上
发表评论：