Class: Router

just.Router()

Route a SPA easily.
Source:
just.js, line 2762

Example

const router = new just.Router();

router.route('home', {
    'pathname': '/',
    'search': /\breload=([^&]+)/
}, (event, {route, data}) => {

    const {action, by} = route;
    let reload;

    if (by === 'search') {
        reload = RegExp.$1;
    }

    if (/init|popstate/.test(action)) {
        // @TODO Call controllers.
    }

});

Methods

changeState(action, url) → {boolean}

Call a window.history's function if available. Otherwise, change the current url using location.hash and prepending a hashbang (#!) to the url state.
Source:
just.js, line 2867
Parameters:
NameTypeDescription
action
string"pushState" or "replaceState".
url
urlA same-origin url.
Returns:
`false` if something fails, `true` otherwise.
Type
boolean

pushState(url) → {boolean}

Do a history.pushState calling just.Router.changeState.
Source:
just.js, line 2903
Parameters:
NameTypeDescription
url
urljust.Router.changeState's url param.
Returns:
just.Router.changeState's returned value.
Type
boolean

replaceState(url) → {boolean}

Do a history.replaceState calling just.Router.changeState.
Source:
just.js, line 2892
Parameters:
NameTypeDescription
url
urljust.Router.changeState's url param.
Returns:
just.Router.changeState's returned value.
Type
boolean

change(action, url, data, eventInit)

Do a just.Router.changeState and trigger an action if it succeds.
Source:
just.js, line 3147
Parameters:
NameTypeDescription
action
stringA valid just.Router.changeState's action.
url
urlThe new url.
data
AnySome data.
eventInit
CustomEventInitOptions for the event.

push(url, data)

Trigger a "pushState" action by calling just.Router#change.
Source:
just.js, line 3166
Parameters:
NameTypeDescription
url
urljust.Router#change's url argument.
data
Anyjust.Router#change's data argument.

CustomEventInitjust.Router#change's eventInit argument.

replace(url, data)

Trigger a "replaceState" action by calling just.Router#change.
Source:
just.js, line 3179
Parameters:
NameTypeDescription
url
urljust.Router#change's url argument.
data
Anyjust.Router#change's data argument.

CustomEventInitjust.Router#change's eventInit argument.

route(id, path, handler, optionsnon-null)

Define a route, attach listeners (for "popstate" and custom events), and trigger an "init" event.
Source:
just.js, line 3075
Parameters:
NameTypeDescription
id
stringSome unique string to identify the current route.
path
string or RegExp or objectA value that will match the current location. A string/RegExp is the same as passing {"pathname": string/RegExp}. An object must contain any window.location's keys, like "search", "hash", ...
handler
functionSome function that will be called when the route matches the current url.
options
object
Properties
NameTypeDefaultDescription
ignore
[optional]		just.Router~route_ignoreallowEverything()
only
[optional]		just.Router~route_onlyallowEverything()
actions
[optional]		ArrayAn array of allowed actions. You can pass an array of string/RegExps.
event
object
Properties
NameTypeDefaultDescription
name
[optional]		string`just:Router:route:${id}`event.type for the CustomEvent.
event-target
[optional]		NodedocumentThe element to attach the event to.
event.init
CustomEventInitValues for the CustomEvent's eventInit argument. You can pass custom values for the "init" event in here.
Properties
NameTypeDescription
detail
object
Properties
NameTypeDefaultDescription
data
[optional]		AnynullCustom data for the "init" event.
route
objectInternal properties.
Properties
NameTypeDefaultDescription
by
[optional] [nullable]		stringnullA window.location key that matched the route ("pathname", ...).
action
[optional] [nullable]		stringnullThe triggered action to call this route. Actions triggered by default include "init" and "popstate".

trigger(action, data, eventInit)

Call a custom action on the current route by triggering a CustomEvent on each given route.
Source:
just.js, line 2997
Parameters:
NameTypeDescription
action
stringSome string.
data
AnyData for the triggered event.
eventInit
CustomEventInitOptions for CustomEvent's eventInit argument.
Examples
Example 1.
import router from 'routes/router.js';

router.route('all', /./, (e, {route, data}) => {

    const {action} = route;

    if (action === 'my-action') {
        console.log(`triggered ${data} on any route!`); // > "triggered my-data on any route!"
    }

});

router.route('home', '/', () => {

    if (action === 'my-action') {
        // ignored.
    }

});

router.constructor.pushState('/item');
router.trigger('my-action', 'my-data');
Example 2: You can go even further by converting all anchors on your html into actions.
// index.html with "/item/a/b/c" as a url.
<a href='#close'></a>

// controllers/item.js
function closeItem ({event, target}) {
    console.log("I'm closing...");
    // @TODO Close.
}

export {closeItem as close}

// routes/item.js
import router from 'router.js';
import * as controller from '../controllers/item.js';

router.route('item', {
    'pathname': /^\/item\//,
    'hash': /^#!\/item\// // Set backwards compability.
}, (e, {route, data}) => {

    if (action === 'close') {
        controller.close(data);
    }

});

// listeners/link.js
import router from 'routes/router.js';

// This is only for demostration purposes.
just.on(document, 'click', (event) => {

    const {target} = event;
    const {hash} = target;

    if (hash) {

        let action = hash.slice(1);
        let data = {'event': e, target};

        router.trigger(action, data);

    }

});

// Then, click an anchor link and the corresponding controller
// will be called.

Type Definitions

route_ignore() → {boolean}

Source:
just.js, line 3032
This:

{just.Router~route}

Returns:
If `true`, the route won't be called.
Type
boolean

route_only() → {boolean}

Source:
just.js, line 3039
This:

{just.Router~route}

Returns:
If `true`, the route will be called.
Type
boolean