Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

Foxy Router

Lightweight javascript routing library for single page applications

Features

* Express style route matching
* Bookmarking of links
* Uses the history api instead of hashes

Requirements

ES6. Use babel if you would like support prior to ES6.

Quick Start

Registering a new route:

// This route will match a url like: /stocks/AAPL
FoxyRouter.add(`/stocks/:stock_symbol`, (parameters) => {
	let text = `You're viewing data for stock symbol: ${parameters.stock_symbol}`;
	document.getElementById(`page-container`).innerHTML = text;
})

Basic Route Paths

Paths can be any string along with regular expression patterns.

Route to the website index:

FoxyRouter.add(`/`, () => {
	document.getElementById(`page-container`).innerHTML = `This is the index`;
});

Route to the about page:

FoxyRouter.add(`/currency`, () => {
	document.getElementById(`page-container`).innerHTML = `This is the currency page`;
});

Route Parameters

Routes can also have dynamic parameters prefixed with a semicolon(:).

FoxyRouter.add(`/race_list/:race_id`, (parameters) => {
	// :race_id is the triathlon specified
	// e.g. /race_list/Dunedin

	let text = `You are viewing the ${parameters.race_id} triathlon`;
	document.getElementById(`page-container`).innerHTML = text;
});
FoxyRouter.add(`race_list/:race_id/:athlete`, (parameters) => {
	// e.g. /race_list/Dunendin/Will_Brock

	let text = `You are viewing the ${parameters.race_id} triathlon for ${parameters.athlete}`;
	document.getElementById(`page-container`).innerHTML = text;
});

Query Parameters

All query parameters are merged into the route parameters argument of the callback.

	// e.g /stocks/AAPL?timeframe=weekly&chart_type=candlestick
	FoxyRouter.add('/stocks/:stock_symbol', (parameters) => {
		let text = `Viewing ${parameters.stock_symbol}, timeframe: ${parameters.timeframe}, chart type: ${parameters.chart_type}.`;
		document.getElementById(`page-container`).innerHTML = text;
	});

Route chaining

Adding new routes can be chained.

FoxyRouter
	.add(`/`, (parameters) => {

	})
	.add(`/stocks`, (parameters) => {

	})
	.add(`/bonds`, (parameters) => {

	});

Callbacks

Multiple callbacks can be added for each route

FoxyRouter
	.add('/stocks', (parameters) => {
		console.log(`Callback 1 for /stocks`);
	}, () => {
		console.log(`Callback 2 for /stocks`);
	});

About

Lightweight javascript routing library for single page applications

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published