All Projects → krasimir → Navigo

krasimir / Navigo

Licence: mit
A simple vanilla JavaScript router.

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Navigo

Frontexpress
An Express.js-Style router for the front-end
Stars: ✭ 263 (-89.2%)
Mutual labels:  router, history
Sheet Router
fast, modular client-side router
Stars: ✭ 219 (-91.01%)
Mutual labels:  router, history
ultra-router
Router for component-based web apps. Pair with React or <BYOF />.
Stars: ✭ 35 (-98.56%)
Mutual labels:  router, history
Mobx Router
A simple router for MobX + React apps
Stars: ✭ 489 (-79.92%)
Mutual labels:  router, history
Navaid
A navigation aid (aka, router) for the browser in 850 bytes~!
Stars: ✭ 648 (-73.39%)
Mutual labels:  router, history
Redux Saga Router
A router for Redux Saga
Stars: ✭ 153 (-93.72%)
Mutual labels:  router, history
Route
原生 js 实现的轻量级路由,且页面跳转间有缓存功能。
Stars: ✭ 68 (-97.21%)
Mutual labels:  router, history
Redux First History
🎉 Redux First History - Redux history binding support react-router - @reach/router - wouter
Stars: ✭ 163 (-93.31%)
Mutual labels:  router, history
Routerify
A lightweight, idiomatic, composable and modular router implementation with middleware support for the Rust HTTP library hyper.rs
Stars: ✭ 173 (-92.9%)
Mutual labels:  router
Bashhub Server
Private cloud shell history. Open source server for bashhub https://github.com/rcaloras/bashhub-client
Stars: ✭ 189 (-92.24%)
Mutual labels:  history
React Router Native Stack
A stack navigation component for react-router-native
Stars: ✭ 171 (-92.98%)
Mutual labels:  router
Laravel Auditing
Record the change log from models in Laravel
Stars: ✭ 2,210 (-9.24%)
Mutual labels:  history
Vue Routisan
Elegant, fluent route definitions for Vue Router, inspired by Laravel. v3 is currently in beta. [email protected]
Stars: ✭ 193 (-92.07%)
Mutual labels:  router
Easyrouter
A component routing framework simple, stable and high-performance, which supports UI, Method Calls, Interceptors, Callbacks and More than these.
Stars: ✭ 172 (-92.94%)
Mutual labels:  router
Brouter
Stars: ✭ 198 (-91.87%)
Mutual labels:  router
Httprouter
A high performance HTTP request router that scales well
Stars: ✭ 13,500 (+454.41%)
Mutual labels:  router
Git History
Quickly browse the history of a file from any git repository
Stars: ✭ 12,676 (+420.57%)
Mutual labels:  history
Route
Simple isomorphic router
Stars: ✭ 199 (-91.83%)
Mutual labels:  router
Bilihp App
BiliBili助手-哔哩哔哩助手苹果/安卓/IOS/PC/C2C/Mac/路由器/单用户/多用户/手机版全平台支持挂机软件库(2020-BiliHP)
Stars: ✭ 196 (-91.95%)
Mutual labels:  router
Arouter
💪 A framework for assisting in the renovation of Android componentization (帮助 Android App 进行组件化改造的路由框架)
Stars: ✭ 13,587 (+457.99%)
Mutual labels:  router

Navigo

A simple dependency-free minimalistic JavaScript router

npm downloads size

Selling points

  • Dependency free
  • ~10KB minified, ~4KB gzipped
  • Based on History API so it does update the URL of the page
  • Supports hash based routing too
  • Simple mapping of route to a function call
  • Parameterized routes
  • Navigating between routes
  • Hooks (before, after, leave, already)
  • Not-found and default handler
  • Easy integration with HTML links via data-navigo HTML attribute

Installation

Drop the following into your page:

<script src="//unpkg.com/navigo"></script>

or via npm/yarn:

> npm install navigo --save
> yarn add navigo -S

Quick start

import Navigo from 'navigo'; // When using ES modules.

const router = new Navigo('/');

The constructor of the library accepts a single argument - the root path of your app. If you host your project at https://site.com/my/awesome/app, your root path is /my/awesome/app. Then you have to define your routes.

router.on('/my/awesome/app', function () {
  // do something
});

At the end you have to trigger the resolving logic:

router.resolve();

After that when you need a page change call the navigate method. This one changes the URL and (by default) triggers resolve.

router.navigate('/about');

Add data-navigo attribute to your page links and they'll be transformed into navigate callers.

<a href="/about/contacts" data-navigo>Contacts</a>

Checkout the online playground to see it in action.

Development

> yarn dev

Building

> yarn build

Tests

> yarn test
> yarn test-watch

MISC

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].