Router

DOMY Router enables declarative navigation and component rendering based on the current URL. It supports static, dynamic, optional, wildcard routes and catch-all fallback logic.

Installation

Include the DOMY Router plugin via CDN:

<script src="https://unpkg.com/@domyjs/router@1.x.x"></script>

---

Route Patterns

DOMY Router supports expressive route types to match paths precisely:

• Literal (/home)
  Matches /home exactly. Does not match /home/page or /homepage.

• Named Parameter (/:name)
  Matches /john or /123. Does not match /john/doe or /.

• Optional Parameter (/:tab?)
  Matches /profile or /profile/settings. Does not match /profile/settings/details.

• Rest Segment (/users/:path+)
  Matches /users/john, /users/john/settings. Requires at least one segment after /users.

• Wildcard (/docs/:slug*)
  Matches /docs, /docs/intro, /docs/a/b/c. Supports zero or more segments.

• Regex Constraint (/order/:id(\\d+))
  Matches /order/42 but not /order/abc. Useful for numeric IDs.

• Catch-All (404 Fallback) (/:path*)
  Matches any unmatched path. Should be declared last to handle unknown routes.

---

Basic Setup

Define your routes by associating a route, name, and component.

Route Example

{
  name: 'user-profile',      // Route name
  route: '/user/:id',        // Path pattern
  component: UserComponent,  // Component to render
  before({ to, from }) {     // Per-route guard
    return fetchUser(to.params.id) ? undefined : false
  },
  after({ to, from }) {      // Per-route post-hook
    logNavigation(to.path)
  }
}

Full Setup Example

function r(route, name) {
  return {
    route,
    name,
    component: DOMY.createComponent({
      html: `<div><h1>${name}</h1></div>`
    })
  };
}

const routes = [r('/', 'Home'), r('/about', 'About')];

const { router, RouterView, RouterLink, useRouter } = createRouter({
  hashMode: true,
  routes
});

DOMY.createApp(() => {
  return { routes };
})
  .plugins([router])
  .components({ RouterView, RouterLink })
  .mount();

---

<router-link>

Render links to routes with optional styling for the active one. You can also pass params and query-params;

<router-link to="/about" active-class="active-link">Go to About</router-link>

---

<router-view>

Render the component for the current route dynamically.

<router-view transition="fade"></router-view>

---

Accessing Router Info

Within any template or component:

<p>Current Path: {{ $router.path }}</p>
<p>Params: {{ JSON.stringify($router.params) }}</p>

Or with the hook:

const { router, RouterView, RouterLink, useRouter } = createRouter({
  hashMode: true,
  routes
});

// Example
const route = useRouter();
route.navigate({ name: 'Home' });

Properties

Property	Type	Description
path	string	Current path (without query/hash)
fullPath	string	Full path with query/hash
params	object	Current route parameters
queryParams	object	Parsed query parameters

Methods

navigate(routeInfos)

Programmatically navigate:

router.navigate({
  name: 'user-profile', // or path: '/user/:id' instead of name
  params: { id: 123 },
  queryParams: { tab: 'settings' }
});

replace(routeInfos)

Same as navigate but replaces current history entry.

go(delta)

Like the window.history.go() method.

goBack()

Go back in history.

goForward()

Go forward in history.

destroy()

Remove the popstate/hashchange listener.

---

Navigation Hooks

beforeEach(fn)

Global before hook that executes before each navigation. Can cancel or redirect the navigation.

router.beforeEach(({ to, from }) => {
  if (!isAuthenticated() && to.name !== 'login') return { name: 'login' }; // Redirect to login
});

Return values:

• void: Continue navigation
• false: Cancel navigation
• RouteInfos: Redirect to new location

---

afterEach(fn)

Global after hook that executes after each successful navigation.

router.afterEach(({ to, from }) => {
  trackPageView(to.path); // Analytics tracking
});

Note: Cannot modify navigation, only observes.

Full Example

<nav>
  <router-link to="/" active-class="underline">Home</router-link>
  <router-link to="/about" active-class="underline">About</router-link>
  <router-link to="/user/42" active-class="underline">User</router-link>
</nav>

<router-view transition="slide"></router-view>

<footer>
  Current route: {{ $router.path }}<br />
  Parameters: {{ JSON.stringify($router.params) }}
</footer>

Loading DOMY router…