前端路由的配置教程

1、前端路由的配置教程首先在路由界面配置路由，children是配置子路由的const routes: Routes = path:,component:HomeComponent;然后在引入组件：Routes的使用import HomeComponent from ./home/ponent;在path中不能使用/，因为在多个视图间导航时，自由使用相对或者绝对路径RouteRoutlet的使用：插座，所有的界面都在本界面的下面显示RouterLink的使用：ponent.html界面：主页商品详情解释：routerLink后面/的是跳转的跟路由，加上点是跳转子路由的点击主页面上的按钮跳转到路由界面app-routing.module.ts路由界面import HomeComponent from ./home/ponent;import ProductComponent from ./product/ponent;const routes: Routes = path:,component:HomeComponent,path:product,component:ProductCompo

2、nent;例如：我点击商品详情，然后就找到跟路由中的product，然后根据引用找到相应的界面 棋牌评测网http:/还有通过按钮跳转：然后在到ponent.tsconstructor(private router:Router)todo()this.router.navigate(/product);完整界面截图：ActivatedRoute的使用：ponent.html界面：商品详情ponent.ts界面，如何获取ActivatedRoute参数：export class ProductComponent implements OnInit private productId:number;/首先在构造函数中注入（码号后面的是类型）constructor(private routerInfo:ActivatedRoute) ngOnInit() /获取参数this.productId=this.routerInfo.snapshot.queryParamsid;ponent.html界面，现在最后的参数：商品ID：productId第二种传参方式，URL方式第一步：修改路由中的pa

3、th属性，改成path:product/:id,component:ProductComponent,第二步：修改routerLink中的参数：商品详情第三步修改取值：ngOnInit() /从URL中获取this.productId=this.routerInfo.snapshot.paramsid;这种最后获取的值是1，todo()this.router.navigate(/product,2);这方式获取的结果是2但是来回切换的时候路径中的值变换页面的值不更换，解决这种问题方法叫做参数快照，使用这种方式叫做参数快照（snapshot），在查询参数中传递数据：使用的方式参数快照（snapshot） 和 参数订阅（subscribe）解决问题步骤：修改第三步中的获取参数的方式ngOnInit() /参数订阅this.routerInfo.params.subscribe(params:Params)=this.productId=paramsid);/this.productId=this.routerInfo.snapshot.paramsid;路由重定向：制定路由跳转的界面：pa

4、th:,redirectTo:/home,pathMatch:full,path:home,component:HomeComponent,解释上面的意思：当路由是空字符串的时候直接跳转到home中，然后通过下面这行直接找到相应的home界面 神马午夜影院http:/v-8.cc子路由：子路由创建的方法：path:product/:id,component:ProductComponent,children:path:,component:ProductComponent,path:seller/:id,component:SellerInfoComponent,注解：路由配置完成之后，然后在相应的界面上添加插座routeroutletseller-info组件的配置：seller-ponent.html销售员ID：selledidseller-ponent.ts部分代码：export class SellerInfoComponent implements OnInit private selledid:number;/定义一个数字型的变量constructor(private ro

5、uteinfo:ActivatedRoute) /构造函数ngOnInit() this.selledid=this.routeinfo.snapshot.paramsid;/获取路由中的值ponent.html页面的子组件，所以在此界面中添加商品详情销售员信息辅助路由（兄弟路由）辅助路由插座的写法：路由配置写法：path:chat,component:ChatComponent,outlet:aux在主页面显示写法：开始聊天结束聊天解释：通过路由中的outlets找到chat的html页面，然后显示！图解：开始聊天点击开始聊天，chat界面和home界面都会显示路由守卫先写一个路由守卫，新建里一个ts，然后写进去：import CanActivate from angular/router;export class loginGuard implements CanActivatecanActivate()let lgogenIn:boolean=Math.random()0.5;/获取随机数，if(!lgogenIn)大于0.5显示未登录console.log(用户未登录);ret

6、urn lgogenIn;绑定路由守卫：canActivate:loginGuard，实例化是通过angular注入来实例化的守卫那个路由，就在那个路由的后面写上providers:loginGuard详细用法：离开路由守卫，就是守卫那个组件，在离开的时候就会提示：创建一个ts文件，然后import CanDeactivate from angular/router;import ProductComponent from ./product/ponent;/引用product组件export class UnsaveGuad implements CanDeactivate canDeactivate(component: ProductComponent) return window.confirm(你还没有保存确定离开吗？);添加在要被守卫的组件路由后面，并且添加providerscanDeactivate:UnsaveGuad/添加在路由后面UnsaveGuad/添加在providers数组里面守卫可以添加多个，在数组中有多个的时候可以循环完成如有一个没有满足条件，那么就不会执行当前的操作！

《前端路由的配置教程》由会员m****分享，可在线阅读，更多相关《前端路由的配置教程》请在金锄头文库上搜索。