View Router

View Router is not in any way related to vue-router the official router of vue.js, neither are they alternatives.

View Router is a simple standalone in-page navigator.

Features 🎉

View Router is a simple library that helps you navigate between different views with style.

• Super fast and minimal

• Includes view transitions

• Easy to set up

• History API or hash navigation — Optional

• Small sized (<10kb)

Demo

You might want to see how it works in a test environment before installing: Check for all demos here

Installation

View Router ships a browser build for <script> tags and an ES Module format. You can also install via npm.

NPM

npm i @bukunmikuti/view-router

Script include

<script src="https://unpkg.com/@bukunmikuti/view-router"></script>

ES Module

import ViewRouter from "https://cdn.skypack.dev/@bukunmikuti/view-router"

Set up 🚀

View router exposes a single object: ViewRouter where you can pass your options.

const viewrouter = new ViewRouter(options)

Instantiate the class by passing an object parameter which must include views: [] and other optional properties.

const viewrouter = new ViewRouter({
   views: [], //required
   navigation: "history"||"hash",
   transition: true||false, 
})

views: []

Type: Array of objects — required Description: This property stores each view's property in an object. It can contain several view definitions.

const viewrouter = new ViewRouter({
   views: [
   	{
   		id: "login", //required
   		path: "/login",
   		origin: "/login.html",
   		mounted() {}, //callback
   		render() {} //callback
   	},
   	
   	{/* another view */}
   	{/* another view */}
   ]
})

A view definition should include the following properties:

| View property | Description | Default Value | | :---------------: | :---------------: | :---------------: | | id | The 'id' attribute of the template tag — Required| undefined | | path | The URL path that triggers the view when navigated to. | undefined | | origin | If the view is located in another html document, this will contain the relative path to the document. | undefined | | mounted | Views are not part of the DOM by default, they only get mounted when routed to for the first time. Put any logic that depends on accessing elements of the view here. It is called only once | callback undefined | | render | This method is called each time a view is routed to | callback undefined |

navigation

Type: String — history or hash (optional) Description: Use hash navigation or Web history API. If undefined or false then routing is automatically disabled, else views: [{path: ""}] must be specified.

transition

Type: Boolean — optional Description: Enable or disable view transitions. Transition type must be specified on the view <template> tag. All transitions — fadeIn fadeInTop fadeInBottom fadeInLeft fadeInRight

<!--index.html-->
<template id="login" class="v-router fadeInLeft"></template>

<script type="module">
import ViewRouter from "..."

let v = new ViewRouter({
 //...
 transition: true
})
</script>

Methods

| Method | Description | Return Value | | :---------------: | :---------------: | :---------------: | | routeTo() | Navigate to the specified view. Accepts view id as parameter | executes render() |

Browser support

View Router currently works on all modern browsers that support async/await, fetch API and other es6 features. We plan on supporting older browsers in future release. Check all supported browsers here

Contribution

You can contribute by making pull requests to fix issues, dropping a code review/demo example or updating the readme. Your changes should be clearly stated. Thank you!

License

This project is available under the ISC Liscense