前端路由的配置教程

前端路由的配置教程首先在路由界面配置路由，children是配置子路由的const routes: Routes = [{path:'',component:HomeComponent}];然后在引入组件：Routes的使用import { HomeComponent } from './home/ponent';在path中不能使用"/"，因为在多个视图间导航时，自由使用相对或者绝对路径RouteRoutlet的使用：插座，所有的界面都在本界面的下面显示RouterLink的使用：ponent.html界面：<a [routerLink]="['/']">主页</a><a[routerLink]="['/product']">商品详情</a><router-outlet></router-outlet>解释：routerLink后面'/'的是跳转的跟路由，加上点是跳转子路由的点击主页面上的按钮跳转到路由界面app-routing.module.ts路由界面import { HomeComponent } from './home/ponent';import { ProductComponent } from './product/ponent';const routes: Routes = [{path:'',component:HomeComponent},{path:'product',component:ProductComponent}];例如：我点击商品详情，然后就找到跟路由中的product，然后根据引用找到相应的界面还有通过按钮跳转：<input type="button" value="商品详情" (click)="todo()">然后在到ponent.tsconstructor(private router:Router){}todo(){this.router.navigate(['/product']);}}完整界面截图：ActivatedRoute的使用：ponent.html界面：<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a> ponent.ts界面，如何获取ActivatedRoute参数：export class ProductComponent implements OnInit {private productId:number;//首先在构造函数中注入（码号后面的是类型）constructor(private routerInfo:ActivatedRoute) { }ngOnInit() {//获取参数this.productId=this.routerInfo.snapshot.queryParams["id"];}}ponent.html界面，现在最后的参数：<p>商品ID：{{productId}}</p>第二种传参方式，URL方式第一步：修改路由中的path属性，改成path:'product/:id',component:ProductComponent},第二步：修改routerLink中的参数：<a [routerLink]="['/product',1]" >商品详情</a>第三步修改取值：ngOnInit() {//从URL中获取this.productId=this.routerInfo.snapshot.params["id"];}这种最后获取的值是1，todo(){this.router.navigate(['/product',2]);}这方式获取的结果是2但是来回切换的时候路径中的值变换页面的值不更换，解决这种问题方法叫做参数快照，使用这种方式叫做参数快照（snapshot），在查询参数中传递数据：使用的方式参数快照（snapshot）和参数订阅（subscribe）解决问题步骤：修改第三步中的获取参数的方式ngOnInit() {//参数订阅this.routerInfo.params.subscribe((params:Params)=>this.productId=params["id "]);//this.productId=this.routerInfo.snapshot.params["id"];}路由重定向：制定路由跳转的界面：{path:'',redirectTo:'/home',pathMatch:'full'},{path:'home',component:HomeComponent},解释上面的意思：当路由是空字符串的时候直接跳转到home中，然后通过下面这行直接找到相应的home 界面子路由：子路由创建的方法：{path:'product/:id',component:ProductComponent,children:[{path:'',component:ProductComponent},{path:'seller/:id',component:SellerInfoComponent}]},注解：路由配置完成之后，然后在相应的界面上添加插座routeroutletseller-info组件的配置：ponent.html<p>销售员ID：{{selledid}}</p>ponent.ts部分代码：export class SellerInfoComponent implements OnInit {private selledid:number;//定义一个数字型的变量constructor(private routeinfo:ActivatedRoute) { }//构造函数ngOnInit() {this.selledid=this.routeinfo.snapshot.params["id"];//获取路由中的值}}ponent.html页面的子组件，所以在此界面中添加<a[routerLink]="['./']">商品详情</a><!--子路由的写法--><a[routerLink]="['./seller',99]">销售员信息</a><router-outlet></router-outlet>辅助路由（兄弟路由）辅助路由插座的写法：<router-outlet name="aux"></router-outlet>路由配置写法：{path:'chat',component:ChatComponent,outlet:'aux'}在主页面显示写法：<a [routerLink]="[{outlets:{aux:'chat'}}]">开始聊天</a><a [routerLink]="[{outlets:{aux:null}}]" >结束聊天</a>解释：通过路由中的outlets找到chat的html页面，然后显示！图解：<a [routerLink]="[{outlets:{primary:'home',aux:'chat'}}]">开始聊天</a> 点击开始聊天，chat界面和home界面都会显示路由守卫先写一个路由守卫，新建里一个ts，然后写进去：import { CanActivate } from "@angular/router";export class loginGuard implements CanActivate{canActivate(){let lgogenIn:boolean=Math.random()<0.5;//获取随机数，if(!lgogenIn){大于0.5显示未登录console.log("用户未登录");}return lgogenIn;}}绑定路由守卫：canActivate:[loginGuard]，实例化是通过angular注入来实例化的守卫那个路由，就在那个路由的后面写上providers:[loginGuard]详细用法：离开路由守卫，就是守卫那个组件，在离开的时候就会提示：创建一个ts文件，然后import { CanDeactivate } from "@angular/router";import { ProductComponent } from "../product/ponent";//引用product 组件export class UnsaveGuad implements CanDeactivate<ProductComponent> {canDeactivate(component: ProductComponent) {return window.confirm("你还没有保存确定离开吗？");}}添加在要被守卫的组件路由后面，并且添加providerscanDeactivate:[UnsaveGuad]//添加在路由后面UnsaveGuad//添加在providers数组里面守卫可以添加多个，在数组中有多个的时候可以循环完成如有一个没有满足条件，那么就不会执行当前的操作！。