Router

jsUI comes with a built-in router to allow you to separate your views into javascript files like pages, with one javascript file dictating routes to the jsUI router.

This router is meant to be paired with a server-side config that directs all traffic to an index.html file for jsUI to process the query.

import {router} from 'javascript-ui';
import home from './views/home.js';
import page1 from './views/page1.js';
import page2 from './views/page2.js';

router([
    {url: '/', title: 'Home', name: 'home', view: home},
    {url: '/page1', title: 'Page 1',  name: 'page1', view: page1},
    {url: '/page2', title: 'Page 2', name: 'page2', view: page2}
]);

Route Parameters

url

Required

The URL of the page. This should always be prefixed with a forward slash.

title

Optional (but recommended)

The title of the page. This will update the <title> tag.

name

Optional (but recommended)

Name of the route you can refer to this later using the routeTo() or route() functions.

view

Required

Takes an array of jsUI elements and/or components, or just a single element or component.

Functions

Hyperlink().route(name: string)

The Hyperlink() element has a route() method that takes a route name as its argument to assign the URL of the route with that name as it’s URL.

route(name: string)

This function takes the name of a route and returns the URL of the route with that name. Returns false if the route does not exist.

routeTo(name: string)

This function tells the router to change the current route to the route with that name.

get(key: string)

This function returns URL parameter value by key. (e.g. example.com/?key=value). Returns false if the URL parameter does not exist.