angular路由 angular路由

路由跳转：
angular2
navigate是Router类的一个方法，主要用来跳转路由。
1.this.router.navigate(['user', 1]);
以根路由为起点跳转
2.this.router.navigate(['user', 1],{relativeTo: route});
默认值为根路由，设置后相对当前路由跳转，route是ActivatedRoute的实例，使用需要导入ActivatedRoute
3.this.router.navigate(['user', 1],{ queryParams: { id: 1 } });
路由中传参数 /user/1?id=1
4.this.router.navigate(['view', 1], { preserveQueryParams: true });
默认值为false，设为true，保留之前路由中的查询参数/user?id=1 to /view?id=1
5.this.router.navigate(['user', 1],{ fragment: 'top' });
路由中锚点跳转 /user/1#top
6.this.router.navigate(['/view'], { preserveFragment: true });
默认值为false，设为true，保留之前路由中的锚点/user/1#top to /view#top
7.this.router.navigate(['/user',1], { skipLocationChange: true });
默认值为false，设为true路由跳转时浏览器中的url会保持不变，但是传入的参数依然有效
8.this.router.navigate(['/user',1], { replaceUrl: true });
未设置时默认为true，设置为false路由不会进行跳转

路由示例

app.module.ts

export const ROUTES: Routes = [ { path: '', redirectTo: '/', pathMatch: 'full' }, { path: 'index',component: ZyComponent }, { path: 'home',loadChildren: './app-routing.module#AppRoutingModule'}, { path: 'login', component: LoginComponent }, { path: 'register', component: RegisterComponent }, { path: 'forgetPWD', component: ForgetPasswordComponent } ]; imports: [ BrowserModule, AppRoutingModule, HttpClientModule, FormsModule, RouterModule.forRoot(ROUTES, { useHash: true }), ReactiveFormsModule, BrowserAnimationsModule, /** 导入 ng-zorro-antd 模块 **/ NgZorroAntdModule, FileUploadModule, ],

app-routing.module.ts

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { EditPasswordComponent } from './edit-password/edit-password.component'; import { NoticeComponent } from './notice/notice.component'; import { NoticeDetailComponent } from './notice-detail/notice-detail.component'; import { PositionComponent } from './position/position.component'; import { Step1Component } from './step1/step1.component'; import { Step2Component } from './step2/step2.component'; import { Step3Component } from './step3/step3.component'; import { OkComponent } from './ok/ok.component'; import { InformationComponent } from './information/information.component'; import { InformationDetailComponent } from './information-detail/information-detail.component'; import { PersonalComponent } from './personal/personal.component'; import { MyApplyComponent } from './my-apply/my-apply.component'; import { ReportComponent } from './report/report.component'; import { HomeComponent } from './home/home.component'; import { FormComponent } from './form/form.component'; const routes: Routes = []; export const ROUTES: Routes = [ { path: '', component: HomeComponent, children: [ { path: '', redirectTo: '/index', pathMatch: 'full' }, { path: 'position', children: [ { path: 'form', component: FormComponent }, { path: 'step1', component: Step1Component }, { path: 'step2', component: Step2Component }, { path: 'step3', component: Step3Component }, { path: 'ok', component: OkComponent }, { path: '**', component: PositionComponent } ] }, { path: 'notice', children: [ { path: 'noticeDetail', component: NoticeDetailComponent }, { path: '**', component: NoticeComponent } ] }, { path: 'personal', children: [ { path: 'myApply', component: MyApplyComponent }, { path: 'report', component: ReportComponent }, { path: 'information', children: [ { path: 'informationDetail', component: InformationDetailComponent }, { path: '**', component: InformationComponent } ] }, { path: 'editPassword', component: EditPasswordComponent }, { path: '**', component: PersonalComponent } ] }, ] } ]; @NgModule({ imports: [RouterModule.forChild(ROUTES)], exports: [RouterModule] }) export class AppRoutingModule { }

【angular路由】转载于:https://www.cnblogs.com/mary-123/p/9705288.html