<page-route>
The <page-route> component is the main route container. It mounts slotted content, a lazy src file, or a JavaScript-provided component only when the current pathname matches its route pattern.
1<page-route path="/dashboard">2 <h2>Dashboard View</h2>3</page-route>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
path | string | "/" | The pathname pattern to match (supports parameters like /:id). |
exact | boolean | true | When true, matches the path strictly. When false, matches paths starting with the pattern. |
src | string | undefined | Relative path to an HTML, text, or JavaScript module file to lazy load. |
title | string | undefined | Updates the document title when this route becomes active. |
name | string | undefined | Mutually exclusive route group identifier (similar to a Switch statement). |
Dynamic Parameters
Use a colon : to define path parameters. You can retrieve these values in nested HTML via <page-data> or in JavaScript:
1<page-route path="/users/:userId">2 <h2>User ID: <page-data param="userId"></page-data></h2>3</page-route>Nested Layouts
Set exact="false" on a parent route that should stay active while child routes match. Child path values are appended to the closest parent route path.
1<page-route path="/teams/:teamId" exact="false">2 <h1>Team <page-data param="teamId">unknown</page-data></h1>3 4 <nav>5 <page-link path="$/members">Members</page-link>6 <page-link path="$/settings">Settings</page-link>7 </nav>8 9 <page-route path="/members" src="./teams/members.html"></page-route>10 <page-route path="/settings" src="./teams/settings.js"></page-route>11</page-route>Switch-Like Grouping (name)
To ensure only one route in a group renders at a time (preventing overlapping matches), assign them the same name attribute. The router will evaluate them in order and mount only the first match:
1<!-- Mutually exclusive routing -->2<page-route name="view-group" path="/users/new">3 <h2>Create New User</h2>4</page-route>5 6<page-route name="view-group" path="/users/:userId">7 <h2>User Profile</h2>8</page-route>Lazy Loading (src)
Instead of embedding all views in the main document, load them on-demand by specifying a file in the src attribute.
You can define a loading state and a fallback UI (shown if the request fails) using the loading and fallback slots:
1<page-route path="/about" src="./pages/about-page.html">2 <div slot="loading">Loading page template...</div>3 <div slot="fallback">Oops! Failed to load page.</div>4</page-route>Supported Lazy-Loaded Formats
When loading a JavaScript file, the module must default-export one of the following:
- A plain HTML/text string.
- A native DOM
Node(e.g.Element,DocumentFragment). - An
HtmlTemplategenerated by the Markuphtmltagged literal. - A function that receives
(locationState, pathParams, searchParams)and returns any of the above.
1// ./pages/user-details.js2const { html } = BFS.MARKUP3 4export default (data, params, query) => html`5 <h2>User Profile: ${params.userId}</h2>6 <p>Role: ${data.role}</p>7 <p>Tab: ${query.tab || 'overview'}</p>8`Caching and Lifecycle
To prevent memory leaks and optimize performance:
- Inactive routes receive the
hiddenattribute. - When a loaded route becomes inactive, the engine detaches the DOM tree and caches it in memory.
- If the route matches again, the cached DOM tree is re-inserted without repeating calculations or requests.