【Angular】辅助路由、路由守卫

本文介绍了Angular中的辅助路由和路由守卫,包括CanActivate、CanDeactivate和Resolve守卫的使用。辅助路由用于实现插座间的兄弟关系,而路由守卫则用于控制路由的激活和离开。CanActivate守卫确保用户有权限进入特定路由,CanDeactivate防止用户未保存数据离开,而Resolve守卫则在进入路由前预先加载所需数据。
摘要由CSDN通过智能技术生成

辅助路由

插座之间的兄弟关系–辅助路由:
辅助路由需要三步:

1.插座设置: <router-outlet></router-outlet>
   <router-outlet name="aux"></router-outlet>  
2.在路由配置中(app-routing.module.ts),配置名字为aux的组件
   {path: 'xxx', component: XxxComponent,outlet:"aux"},
3.根据链接跳转导航到辅助路由
    <a [routerLink]="['/home',{outlet:{aux:'xxx'}}]">Xxx</a>
    <a [routerLink]="['/product',{outlet:{aux:'yyy'}}]">Yyy</a>

路由守卫

  • 只有当用户已经等了并拥有某些权限时才能进入某些路由

  • 一个由多个表单组件组成的向导,例如注册流程,用户只有在当前路由的组件中填写满足要求的信息可以导航到下一个路由

  • 当用户未执行保存操作而试图离开当前导航时提醒用户
    Angular提供了一些钩子帮助控制进入或离开路由。这写钩子就是路由守卫,可以通过钩子实现上面场景。

  • CanActivate:处理导航到某路由的情况

  • CanDeactivate:处理从当前路由离开的情况

  • Resolve:在路由激活之前获取路由数据

评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值