Kit Routeris a small and smart front-end router for javascript
🌏 Website
please visit! https://www.useskit.com
🛠️ Install
- CDN Link
unpkg visit url : https://unpkg.com/@useskit/router
<script src="https://unpkg.com/@useskit/router"></script>- NPM install
npm i @useskit/router✍️ Usage
- HTML code fragment in index.html
<header>
<nav>
<router-link to="/">First Page</router-link>
<router-link to="second">Second Page</router-link>
<router-link to="third">Third Page</router-link>
</nav>
</header>
<main>
<section id="first" style="display: none;">
<p>First</p>
<router-link to="second">Go To Second</router-link>
<router-link to="third">Go To Third</router-link>
</section>
<section id="second" style="display: none;">
<p>Second</p>
<router-link to="/">Go To First</router-link>
<router-link to="third">Go To Third</router-link>
</section>
<section id="third" style="display: none;">
<p>Third</p>
<router-link to="/">Go To First</router-link>
<router-link to="second">Go To Second</router-link>
</section>
</main>- JS code fragment in index.html
<script src="https://unpkg.com/@useskit/router"></script>
<script>
const _router = new KitRouter({
root: 'main',
rootPath: '/router',
mode: 'hash',
routes: [
{ path: '/', name: 'first', component: 'first', title: 'The first page' },
{ path: '/second', name: 'second', component: 'second' },
{ path: '/third', name: 'third', component: 'third' },
],
})
</script>- Demo, please visit: https://kit-router.netlify.app
🧪 Functions
- It is not dependent on any framework
- Allowing it to be easily integrated with any of them
🧑 Author
🧑 Aipeli💼 GitHub: Aipeli
🤝 Contributing
Contributions, issues and feature requests are welcome! issues page.
⭐️ Show your support
Give a
💼 GitHub: UsesKit
📝 License
Copyright © 2022 aipeli && UsesKit. This project is MIT licensed.
This README was generated with