Defining routes

Simple routes

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

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

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

const routes: Routes = [{
    path: '',
    component: () => Home
  },
  {
    path: 'about',
    component: () => About,
  }
];

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

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

Nested routes

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

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

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

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

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

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

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

Adding titles

Adding tab title to your route is straightforward, just include title property into route declaration object

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

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

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

const routes: Routes = [{
    path: '',
    title: 'App - Home'
    component: () => Home
  },
  {
    path: 'about',
    title: 'App - about'
    component: () => About,
  }
];

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

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