---
tags: brew-js
---

# Router mode

<span style="background: lightblue;padding:.25em .75em;border-radius:1em;font-weight:bold">v0.4.8</span>

Router supports several mode to accomodate different needs:

urlMode: 'pathname' | 'query' | 'none';

For `pathname` mode, which is the default, there are additional options:

explicitBaseUrl: boolean;
baseUrl: string;

And for `query` mode, the following option is required:

queryParam: string;

## Effects on app path and browser URL

For a valid route `/views/home`:

| `urlMode` | | Page URL | App path | Browser path |
| ---------- | -------------------------------------- | ------------- | -------------------------------- | ---------------------------------- |
| `pathname` | | `/` | `/views/home` | `/views/home` |
| `pathname` | `baseUrl:'/base'` | `/base` | `/views/home` | `/base/views/home` |
| `pathname` | `baseUrl:'/base',explicitBaseUrl:true` | `/base` | `/base/views/home`<br>(See note) | `/base/views/home` |
| `query` | `queryParam:'path'` | `/index.html` | `/views/home` | `/index.html?path=%2Fviews%2Fhome` |
| `none` | | `/index.html` | `/views/home` | `/index.html` |

##### Note

In the third case, i.e. when `explicitBaseUrl` is `true`, all API will only consider path begining with `baseUrl` to be valid:

const { path } = await app.navigate('/base/views/home');
assert(path === '/base/views/home');

If the path is not start with `baseUrl`, it will treat it as root path (`/`):

const { path } = await app.navigate('/views/home');
assert(path === '/base');

## Query string and hash

Query string and hash are allowed in app path, however changing query string or hash alone will not trigger navigation.

For a valid route `/views/home?q=1#h`:

| `urlMode` | | Page URL | App path | Browser path |
| ---------- | -------------------------------------- | ------------- | ------------------------ | ---------------------------------------- |
| `pathname` | | `/` | `/views/home?q=1#h` | `/views/home?q=1#h` |
| `pathname` | `baseUrl:'/base'` | `/base` | `/views/home?q=1#h` | `/base/views/home?q=1#h` |
| `pathname` | `baseUrl:'/base',explicitBaseUrl:true` | `/base` | `/base/views/home?q=1#h` | `/base/views/home?q=1#h` |
| `query` | `queryParam:'path'` | `/index.html` | `/views/home?q=1#h` | `/index.html?path=%2Fviews%2Fhome&q=1#h` |
| `none` | | `/index.html` | `/views/home?q=1#h` | `/index.html?q=1#h` |

## Generate link for browser handling

Route provides methods to convert between app path and browser path.

See [`app.toHref`](/_0M99V4lSK23cyl_L9BKEQ#apptoHref) and [`app.fromHref`](/_0M99V4lSK23cyl_L9BKEQ#appfromHref).