最近一直在学习 angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习。
官方地址:https://angular.cn/docs/ts/latest/api/router/index/Router-class.html
在学习的过程中路由(router)机制是离不开的,并且好多地方都要用到。
首先路由配置 Route:
- import {
- NgModule
- }
- from '@angular/core';
- import {
- RouterModule,
- Routes
- }
- from '@angular/router';
- import {
- HomeComponent
- }
- from './home.component';
- import {
- LoginComponent
- }
- from './login.component';
- import {
- RegisterComponent
- }
- from './register.component';
- const routes: Routes = [{
- path: '',
- redirectTo: '/home',
- pathMatch: 'full'
- },
- {
- path: 'home',
- component: HomeComponent
- },
- {
- path: 'login',
- component: LoginComponent
- },
- {
- path: 'heroes',
- component: RegisterComponent
- }];
- @NgModule({
- imports: [RouterModule.forRoot(routes)],
- exports: [RouterModule]
- }) export class AppRoutingModule {}
其次路由跳转 Router.navigate
- navigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>
- interface NavigationExtras {
- relativeTo : ActivatedRoute
- queryParams : Params
- fragment : string
- preserveQueryParams : boolean
- queryParamsHandling : QueryParamsHandling
- preserveFragment : boolean
- skipLocationChange : boolean
- replaceUrl : boolean
- }
1. 以根路由跳转 / login
- this.router.navigate(['login']);
2. 设置 relativeTo 相对当前路由跳转,route 是 ActivatedRoute 的实例,使用需要导入 ActivatedRoute
- this.router.navigate(['login', 1], {
- relativeTo: route
- });
3. 路由中传参数 /login?name=1
- this.router.navigate(['login', 1], {
- queryParams: {
- name: 1
- }
- });
4.preserveQueryParams 默认值为 false,设为 true,保留之前路由中的查询参数 / login?name=1 to /home?name=1
- this.router.navigate(['home'], {
- preserveQueryParams: true
- });
5. 路由中锚点跳转 /home#top
- this.router.navigate(['home'], {
- fragment: 'top'
- });
6.preserveFragment 默认为 false,设为 true,保留之前路由中的锚点 / home#top to /role#top
- this.router.navigate(['/role'], {
- preserveFragment: true
- });
7.skipLocationChange 默认为 false,设为 true,路由跳转时浏览器中的 url 会保持不变,但是传入的参数依然有效
- this.router.navigate(['/home'], {
- skipLocationChange: true
- });
8.replaceUrl 默认为 true,设为 false,路由不会进行跳转
- this.router.navigate(['/home'], {
- replaceUrl: true
- });
来源: http://www.jb51.net/article/115848.htm