vanjs-router v1.2.3

vanjs-router

Frontend routing control system based on Van.js

• Video Tutorial

Installation

Install van.js and vanjs-router.

npm install vanjs-core vanjs-router

<script src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.7.nomodule.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/iuroc/vanjs-router/js/vanjs-router.1.2.2.js"></script>

Import and Usage

import van from 'vanjs-core'
import { Route, routeTo } from 'vanjs-router'

const { button, div } = van.tags

const App = () => {
    return div(
        Route({ name: 'home' },
            'Page Home. ',
            button({ onclick: () => routeTo('about') }, 'Go To About'),
            ' ',
            button({ onclick: () => routeTo('list', ['hot', '15']) }, 'Go To Hot List'),
        ),
        Route({ name: 'about' },
            button({ onclick: () => routeTo('home') }, 'Back To Home'), ' ',
            'Page About.',
        ),
        () => {
            const listType = van.state('')
            const listId = van.state('')
            const welcome = van.state('')
            return Route({
                name: 'list',
                onFirst() {
                    welcome.val = 'Welcome!'
                },
                onLoad(route) {
                    let [type, id] = route.args
                    listType.val = type
                    listId.val = id
                }
            },
                button({ onclick: () => routeTo('home') }, 'Back To Home'), ' ',
                welcome,
                div('List Type: ', listType),
                div('List Id: ', listId),
            )
        }
    )
}

van.add(document.body, App())

Switch Routes

routeTo('home')               // location.hash = ''
routeTo('about')              // location.hash = '#/about'
routeTo('list', ['hot', 15])  // location.hash = '#/list/hot/15'