# Pages, routing, and hosting

Define URLs, browser titles, and direct link behavior.

URL: https://webrad.atentor.com/docs/rotas-e-hospedagem
Updated: 2026-11-07

Select the page root in the Designer and configure **Browser title** in the Inspector. Page paths are derived automatically from the page name.

| Field | Behavior |
| --- | --- |
| Name | Name used in code and in `Navigate('PageName')`; also determines the lowercase URL path. |
| Route path | Read-only automatic path: Customers becomes /customers; PageCustomers becomes /pagecustomers. |
| Browser title | Browser tab text. Empty values use Application name. |

Rename an ordinary page to change its automatic path. There is no custom Route path field in the Inspector. Automatic paths must be valid and unique; assets is reserved. Use the page name or stable ID in Navigate when you want the router to resolve its path.

**index** is the home page and uses **/index**. **404** uses **/404** and handles unknown addresses. You can change the content of both pages, but cannot rename or delete them.

## History or Hash

Open **Project Settings → Build and publishing → Browser routing**.

| Option | Example | Host configuration |
| --- | --- | --- |
| History (clean URLs) | `https://example.com/customers` | Serve the same index.html for application routes. |
| Hash (static hosting compatibility) | `https://example.com/#/customers` | Standard static hosting without route rewriting. |

**History** is the default. When opening a file through `file://`, the runtime automatically uses **Hash**.

In **Application base path**, use `/` for the domain root or `/myapp/` for a subfolder. The value starts and ends with `/`. Publish files in the matching subfolder and preserve access to assets.

## Navigation in code

```ts
Navigate('Customers');
// Replace the current history entry:
Navigate('Login', { replace: true });
```

The runtime also resolves registered internal paths. Back and Forward follow the selected routing mode. For dynamic titles, change `this.browserTitle` in the page class.

## Page parameters

1. Select the destination page root.
2. Open **Properties → Navigation → Parameters → Configure Parameters**.
3. Add each unique name, select string, number, or boolean, and choose whether it is required or has a default.
4. Save the modal, then save the project.

For a page named **Customers**, declare required numeric customerId and optional boolean showOrders. From another page:

```ts
Navigate('Customers', {
  params: { customerId: 42, showOrders: true },
});
```

The History URL is /customers?customerId=42&showOrders=true; Hash uses #/customers?customerId=42&showOrders=true. Read params.customerId or this.params.customerId in the destination's instance code. Monaco suggests the declared names and types. Values are immutable snapshots available before OnCreate.

Optional parameters without a default may be undefined. A default makes an input optional to send and defined to read, including when Required is selected. Missing or invalid required values and repeated declared values raise PageParameterError. Invalid optional values use the default or undefined. Numbers must be finite decimal values; booleans use true or false. Direct links, refresh, new windows, and Back/Forward use the same declarations.

Supplying params replaces the query by default. paramsHandling = 'merge' retains existing fields and applies new values; an explicit undefined removes a field. 'preserve' keeps the current query and ignores supplied values. With no supplied params, explicit query, or handling option, navigation retains the previous query.

Changing only parameters on the active page retains its instance and emits **OnParametersChanged** without repeating OnCreate or OnShow. event.detail.previous and event.detail.params hold the old and new snapshots.

After publishing, open a route directly and refresh the browser. A server 404 on that request means hosting needs an index.html fallback rule or Hash mode.