填写这份《一分钟调查》，帮我们（开发组）做得更好！去填写Home
API 参考手册
API > @angular/router

UrlCreationOptions

本选项用来修改 Router 的 URL。向 Router 导航功能提供包含任何这些属性的对象，以控制应如何构造目标 URL。

Options that modify the Router URL. Supply an object containing any of these properties to a Router navigation function to control how the target URL should be constructed.

      
      interface UrlCreationOptions {
  relativeTo?: ActivatedRoute | null
  queryParams?: Params | null
  fragment?: string
  queryParamsHandling?: QueryParamsHandling | null
  preserveFragment?: boolean
}

子接口

参见

属性

属性说明
relativeTo?: ActivatedRoute | null

允许从当前激活的路由进行相对导航。

Specifies a root URI to use for relative navigation.

比如，考虑下列路由器配置，parent 路由拥有两个子路由。

For example, consider the following route configuration where the parent route has two children.

[{ path: 'parent', component: ParentComponent, children: [{ path: 'list', component: ListComponent },{ path: 'child', component: ChildComponent }] }]
      
      [{
  path: 'parent',
  component: ParentComponent,
  children: [{
    path: 'list',
    component: ListComponent
  },{
    path: 'child',
    component: ChildComponent
  }]
}]

下面的 go() 函数会把目标 URI 解释为相对于已激活路由 child 的，从而导航到 list 路由。

The following go() function navigates to the list route by interpreting the destination URI as relative to the activated child route

@Component({...}) class ChildComponent { constructor(private router: Router, private route: ActivatedRoute) {} go() { this.router.navigate(['../list'], { relativeTo: this.route }); } }
      
      @Component({...})
class ChildComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}

  go() {
    this.router.navigate(['../list'], { relativeTo: this.route });
  }
}
queryParams?: Params | null

设置 URL 的查询参数。

Sets query parameters to the URL.

// Navigate to /results?page=1 this.router.navigate(['/results'], { queryParams: { page: 1 } });
      
      // Navigate to /results?page=1
this.router.navigate(['/results'], { queryParams: { page: 1 } });
fragment?: string

设置 URL 的哈希片段（#）。

Sets the hash fragment for the URL.

// Navigate to /results#top this.router.navigate(['/results'], { fragment: 'top' });
      
      // Navigate to /results#top
this.router.navigate(['/results'], { fragment: 'top' });
queryParamsHandling?: QueryParamsHandling | null

如何在路由器链接中处理查询参数以进行下一个导航。为下列值之一：

How to handle query parameters in the router link for the next navigation. One of:

  • preserve ：保留当前参数。

    preserve : Preserve current parameters.

  • merge ：合并新的当前参数。

    merge : Merge new with current parameters.

“preserve” 选项将放弃所有新的查询参数：

The "preserve" option discards any new query params:

// from /view1?page=1 to/view2?page=1 this.router.navigate(['/view2'], { queryParams: { page: 2 }, queryParamsHandling: "preserve" });
      
      // from /view1?page=1 to/view2?page=1
this.router.navigate(['/view2'], { queryParams: { page: 2 },  queryParamsHandling: "preserve"
});

“merge” 选项会将新的查询参数附加到当前 URL 的参数中：

The "merge" option appends new query params to the params from the current URL:

// from /view1?page=1 to/view2?page=1&otherKey=2 this.router.navigate(['/view2'], { queryParams: { otherKey: 2 }, queryParamsHandling: "merge" });
      
      // from /view1?page=1 to/view2?page=1&otherKey=2
this.router.navigate(['/view2'], { queryParams: { otherKey: 2 },  queryParamsHandling: "merge"
});

queryParams 对象中的参数之间发生键名冲突，则使用新值。

In case of a key collision between current parameters and those in the queryParams object, the new value is used.

preserveFragment?: boolean

在后续导航时保留 # 片段

When true, preserves the URL fragment for the next navigation

// Preserve fragment from /results#top to /view#top this.router.navigate(['/view'], { preserveFragment: true });
      
      // Preserve fragment from /results#top to /view#top
this.router.navigate(['/view'], { preserveFragment: true });