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 { }