Params

Route params

Getting current route param

index.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';
import { Routes, router } from 'vistajs/router'

const Home = Component('app-home', () => {

  return () => html`<p>Hello Home</p>`;
});

const Post = Component('app-post', () => {
  const route = router()
  return  () => html`<p>Hello Author with ID: ${route.snapshot.params.id}</p>`;
});

const routes: Routes = [
  {
    path: '',
    component: () => Home,
  },
  {
    path: 'post/:id',
    component: () => Post
  }
];

const root = document.querySelector('#root') as Element;

bootstrap(document.body, root, { routes })

result

Getting all params

When you have deeply nested routes, it can be useful to access all query params since the root route to the current route like post/1/author/john route:

index.ts

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';
import { Routes, router } from 'vistajs/router'

const Home = Component('app-home', () => {
  return () => html`<p>Hello Home</p>`;
});

const Post = Component('app-post', () => {
  const route = router();
  return  () => html`<p>Post ID: ${route.snapshot.root.post.id}</p>`;
});

const Author = Component('app-author', () => {
  const route = router();
  return  () => html`
    <div>
      <p>Post ID: ${route.snapshot.root.post.id}</p>
      <p>Author name: ${route.snapshot.root.author.name}</p>
    </div>
  `;
});

const routes: Routes = [
  {
    path: '',
    component: () => Home,
  },
  {
    path: 'post/:id',
    component: () => Post,
    children: [{
       path: 'author/:name',
       component: () => Author
    }]
  }
];

const root = document.querySelector('#root') as Element;

bootstrap(document.body, root, { routes })

result