@bukunmikuti/view-router v1.0.1
View Router
NPM
npm i @bukunmikuti/view-routerScript include
<script src="https://unpkg.com/@bukunmikuti/view-router"></script>ES Module
import ViewRouter from "https://cdn.skypack.dev/@bukunmikuti/view-router" 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() |
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