前端路由的配置教程
前端路由的配置教程首先在路由界面配置路由,children是配置子路由的const routes: Routes = path:'',component:HomeComponent;然后在引入组件:Routes的使用import HomeComponent from './home/home.component'在path中不能使用"/",因为在多个视图间导航时,自由使用相对或者绝对路径RouteRoutlet的使用:插座,所有的界面都在本界面的下面显示RouterLink的使用:app.component.html界面:<a routerLink="'/'">主页</a><arouterLink="'/product'">商品详情</a><router-outlet></router-outlet>解释:routerLink后面'/'的是跳转的跟路由,加上点是跳转子路由的点击主页面上的按钮跳转到路由界面app-routing.module.ts路由界面import HomeComponent from './home/home.component'import ProductComponent from './product/product.component'const routes: Routes = path:'',component:HomeComponent,path:'product',component:ProductComponent;例如:我点击商品详情,然后就找到跟路由中的product,然后根据引用找到相应的界面 棋牌评测网http:/www.77884.net还有通过按钮跳转:<input type="button" value="商品详情" (click)="todo()">然后在到app.component.tsconstructor(private router:Router)todo()this.router.navigate('/product');完整界面截图:ActivatedRoute的使用:app.component.html界面:<a routerLink="'/product'" queryParams="id:1">商品详情</a>product.component.ts界面,如何获取ActivatedRoute参数:export class ProductComponent implements OnInit private productId:number;/首先在构造函数中注入(码号后面的是类型)constructor(private routerInfo:ActivatedRoute) ngOnInit() /获取参数this.productId=this.routerInfo.snapshot.queryParams"id"product.component.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界面 神马午夜影院http:/v-8.cc子路由:子路由创建的方法:path:'product/:id',component:ProductComponent,children:path:'',component:ProductComponent,path:'seller/:id',component:SellerInfoComponent,注解:路由配置完成之后,然后在相应的界面上添加插座routeroutletseller-info组件的配置:seller-info.component.html<p>销售员ID:selledid</p>seller-info.component.ts部分代码:export class SellerInfoComponent implements OnInit private selledid:number;/定义一个数字型的变量constructor(private routeinfo:ActivatedRoute) /构造函数ngOnInit() this.selledid=this.routeinfo.snapshot.params"id"/获取路由中的值product.component.html页面的子组件,所以在此界面中添加<arouterLink="'./'">商品详情</a><!-子路由的写法-><arouterLink="'./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 CanActivatecanActivate()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/product.component"/引用product组件export class UnsaveGuad implements CanDeactivate<ProductComponent> canDeactivate(component: ProductComponent) return window.confirm("你还没有保存确定离开吗?");添加在要被守卫的组件路由后面,并且添加providerscanDeactivate:UnsaveGuad/添加在路由后面UnsaveGuad/添加在providers数组里面守卫可以添加多个,在数组中有多个的时候可以循环完成如有一个没有满足条件,那么就不会执行当前的操作!