# Day26 【牙起來】 路由跳轉帶參數 - Routing

## 頁面導轉方法

首先，在畫面上新增一個按鈕，點了可以導頁
修改`app.component.html`

<router-outlet></router-outlet>

<button routerLink="store">點我導到store page</button>

### `window.location` - Javascript 作法

  goStore(): void {
    window.location.href = '/store'
    // 或者 window.location.assign('/store');
    // 或者 location.href = '/store';
  }

> 這個方法不藉由`Router`
> 而是透過`Javascript`原生方式，會**刷新頁面**
>
> 通常會用來導向外部網頁
> ex: `window.location.href = 'https://google.com.tw'`

### `navigateByUrl` - Router 作法

注入`Router`服務來導頁

修改`app.component.ts`

...

  constructor(private router: Router) {
  }

  goStore(): void {
    this.router.navigateByUrl('store');
    // 或者 this.router.navigate(['store']);
  }

### `routerLink` - Router 作法

修改`app.component.html`

<router-outlet></router-outlet>

<button routerLink="store">點我導到store page</button>

---

## 網址列上的參數：


* **路徑參數(Path Params)**：長在資源路徑裡的`字串` ex: ".../role/id`/6556`" 參數以路徑形式帶入
* **查詢參數(Query Params)**：長在問號後面的`key=value` ex: ".../role`?id=6556`" 或稱`Query String`
* **段落分段(Fragment)**：長在井字號後面的`字串`，用來定位呈現的區塊

---

## 帶入路徑參數(Path Params)

### 陣列參數 `routerLink` - 樣板帶參數

修改`app.component.html`

<router-outlet></router-outlet>

<a [routerLink]="['role', '6556']">點我進role</a>


> 若帶入物件的話會出現分號
> `<a [routerLink]="['/role/1', { atk: 10 }]">點我進role</a>`
>
> 

### Router服務 `router.navigate` - 程式帶參數

修改`app.component.ts`

...

  constructor(private router: Router) {
  }

  goRole(): void {
    this.router.navigate(['role', '6556']);
  }

## 帶入查詢參數(Query Params)

### 查詢參數 `queryParams` - 樣板帶參數

修改`app.component.html`

<router-outlet></router-outlet>

<button [routerLink]="pages[0]" [queryParams]="pages">點我進store</button>
<a [routerLink]="['role']" [queryParams]="abilityScore">點我進role</a>

修改`app.component.ts`，新增對應的成員(member)

export class AppComponent {
  title = 'project04';
  pages = ['store', 'role']
  abilityScore = {'atk': 15, 'def': 6} // 能力值
  constructor() {
  }

}

點擊按鈕切換分頁時，可以看到隨之帶的物件參數
以**Key-Value**的形式夾帶在URL中

* 帶Object參數： `atk=15&def=6`
* 帶List參數：`0=store&1=role`


### Router服務 `router.navigate` - 程式帶參數

修改`app.component.ts`

  constructor(private router: Router) {
  }

  goRole(): void {
    this.router.navigate(['role', '6556'], {queryParams: {'atk': 123, 'def': 44}});
    // 或者
    // let extras: NavigationExtras = {
    //   queryParams: {'atk': 123, 'def': 44}
    // }
    // this.router.navigate(['role', '6556'], extras);
  }

## 帶入段落分段(Fragment)

### 段落分段 `fragment` - 樣板帶參數

修改`app.component.html`

<router-outlet></router-outlet>

<a [routerLink]="['role']" [fragment]="'theme'">點我進role</a>


### Router服務 `router.navigate` - 程式帶參數

修改`app.component.ts`

...

  constructor(private router: Router) {
  }

  goRole(): void {
    this.router.navigate(['role'], {fragment: 'theme'});
  }