---
# System prepended metadata

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

---

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

## 頁面導轉方法

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

```html=
<router-outlet></router-outlet>

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

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

```typescript=
  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`
```typescript=
...

  constructor(private router: Router) {
  }

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

```

### `routerLink` - Router 作法

修改`app.component.html`

```html=
<router-outlet></router-outlet>

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

---


## 網址列上的參數：

![](https://i.imgur.com/seWAlWL.png)


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


---

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

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

修改`app.component.html`
```html=
<router-outlet></router-outlet>

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

![](https://i.imgur.com/UAWZX3f.png)

> 若帶入物件的話會出現分號
> `<a [routerLink]="['/role/1', { atk: 10 }]">點我進role</a>`
> 
> ![](https://i.imgur.com/clImVN3.png)


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

修改`app.component.ts`
```typescript
...

  constructor(private router: Router) {
  }

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


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

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

修改`app.component.html`

```html=
<router-outlet></router-outlet>

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

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

```typescript=
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`

![](https://i.imgur.com/UZgTPjD.png)
![](https://i.imgur.com/Ef2L4Ht.png)

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

修改`app.component.ts`

```typescript=
  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`

```html=
<router-outlet></router-outlet>

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

![](https://i.imgur.com/IB1QY1e.png)

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

修改`app.component.ts`

```typescript=
...

  constructor(private router: Router) {
  }

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

