如何在Angular中使用router.navigateByUrl和router.navigate

如下所用的routerLink指令：

<a [routerLink]="/inbox/33/messages/44">Open Message 44</a>

只是使用路由器及其navigateByUrl方法的命令式导航的包装：

router.navigateByUrl('/inbox/33/messages/44')

从资料来源可以看出：

export class RouterLink {
  ...

  @HostListener('click')
  onClick(): boolean {
    ...
    this.router.navigateByUrl(this.urlTree,extras);
    return true;
  }

因此,只要您需要将用户导航到另一个路由,只需注入路由器并使用navigateByUrl方法：

class MyComponent {
   constructor(router: Router) {
      this.router.navigateByUrl(...);
   }
}

导航

您可以使用路由器上的另一种方法 – navigate：

router.navigate(['/inbox/33/messages/44'])

两者之间的差异

Using router.navigateByUrl is similar to changing the location bar
directly–we are providing the “whole” new URL. Whereas
router.navigate creates a new URL by applying an array of passed-in
commands,a patch,to the current URL.

To see the difference clearly,imagine that the current URL is
'/inbox/11/messages/22(popup:compose)'.

With this URL,calling
router.navigateByUrl('/inbox/33/messages/44') will result in
'/inbox/33/messages/44',and calling
router.navigate('/inbox/33/messages/44') will result in
'/inbox/33/messages/44(popup:compose)'.

阅读更多the official docs.