angular 中的路由简单的配置详解

2019-4-21 一诺 js库

1.重定向路由配置
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组件上

标签: angular

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 @2015 勿恨水长东
qq:1614245331 邮箱:13515678147@163.com Powered by emlog