• 導向的幾種寫法 component
  • 導向的其他寫法 html
  • navigate()  和  navigateByUrl()  差異

導向的幾種寫法 component

  • 以根路由跳轉/login
1
    this.router.navigate(['login']);

設置relativeTo相對當前路由跳轉,route是ActivatedRoute的實例,


  • 使用需要導入ActivatedRoute
1
    this.router.navigate(['login'],{relativeTo: route});

  • 路由中傳參數 /login?name=1
1
    this.router.navigate(['login'],{ queryParams: { name: 1 } });

  • /login?name=1 到 /home?name=1
1
    this.router.navigate(['home'], { preserveQueryParams: true });
  • preserveQueryParams默認值為false,設為true,

是保留之前路由中的查詢參數

  • 在Angular 4+中,不推薦使用preserveQueryParams,

請用queryParamsHandling

1
    this.router.navigate(['home'], { queryParamsHandling: "preserve" });

queryParamsHandling 有三種屬性

1
2
3
    merge:合併已有的 queryParams 到當前的 queryParams 中
    preserve:儲存當前的 queryParams
    default:僅使用查詢參數

  • 路由中錨點跳轉 /home#top
1
    this.router.navigate(['home'],{ fragment: 'top' });

  • /home#top 到 /role#top
1
    this.router.navigate(['/role'], { preserveFragment: true });

preserveFragment默認為false,設為true,是保留之前路由中的錨點


  • 路由跳轉時瀏覽器中的url會保持不變,但是傳入的參數依然有效
1
    this.router.navigate(['/home'], { skipLocationChange: true });

skipLocationChange默認為false,設為true


  • replaceUrl默認為true,設為false,路由不會進行跳轉
1
    this.router.navigate(['/home'], { replaceUrl: true });

若要設定兩個參數以上,可這麼寫

1
2
    this.router.navigate(['/home'], 
    { queryParams: { 'session_id': sessionId },  fragment: 'anchor' });
1
2
3
4
5
6
    let navigationExtras: NavigationExtras = {
        queryParams: { 'session_id': sessionId },
        fragment: 'anchor'
    };

    this.router.navigate(['/login'], navigationExtras);

navigate() 裡的第一個參數 丟路徑跟params相關的陣列, 第二個參數是丟其他設定或是queryParams相關的物件

導向的其他寫法 html

1
<a routerLink="/heroes">Heroes</a>
1
<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}">Somewhere</a>
1
2
3
4
<a  [routerLink]="['/main/manage']" [queryParams]="{'name':"Hello", 'num':10}" 
    [fragment]="yyy">
    Somewhere
</a>
1
2
3
4
<a [routerLink]="['data',{ key : '123' }]" [queryParams]="{ name : 'aaa' }">
    go child
</a>
// http://somewhere/data;key=123?name=aaa

navigate()  和  navigateByUrl()  差異

  • navigateByUrl()是進行絕對路徑,絕對路徑必須先/

  • navigate() 是採用輸入一系列的參數來產生 URL

1
2
    this.router.navigateByUrl('/login');
    this.router.navigate(['/login']);

備註

  • ”/path” 表示從 root 開始

  • ”../path” 表示從當前route往上(parent)

  • “path” 表示從當前往下(child)


參考至