JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    a tiny javascript hash router
    Filed under  › 

    • 🔾29%Overall
    • 606
    • 47.5 days
    • 🕩97
    • 👥10

    #Routie

    Routie is a javascript hash routing library. It is designed for scenarios when push state is not an option (IE8 support, static/Github pages, Phonegap, simple sites, etc). It is very tiny (800 bytes gzipped), and should be able to handle all your routing needs.

    ##Download

    ##Basic Usage

    There are three ways to call routie:

    Here is the most basic way:

    routie('users', function() {
        //this gets called when hash == #users
    });
    

    If you want to define multiple routes you can pass in an object like this:

    routie({
        'users': function() {
    
        },
        'about': function() {
        }
    });
    

    If you want to trigger a route manually, you can call routie like this:

    routie('users/bob');  //window.location.hash will be #users/bob
    

    ##Regex Routes

    Routie also supports regex style routes, so you can do advanced routing like this:

    routie('users/:name', function(name) {
        console.log(name);
    });
    routie('users/bob'); // logs `'bob'`
    

    ###Optional Params:

    routie('users/:name?', function(name) {
        console.log(name);
    });
    routie('users/'); // logs `undefined`
    routie('users/bob'); // logs `'bob'`
    

    ###Wildcard:

    routie('users/*', function() {
    });
    routie('users/12312312');
    

    ###Catch All:

    routie('*', function() {
    });
    routie('anything');
    

    ##Named Routes

    Named routes make it easy to build urls for use in your templates. Instead of re-creating the url, you can just name your url when you define it and then perform a lookup. The name of the route is optional. The syntax is "[name] [route]".

    routie('user users/:name', function() {});
    

    then in your template code, you can do:

    routie.lookup('user', { name: 'bob'}) // == users/bob
    

    ##Dependencies

    None

    ##Supports

    Any modern browser and IE8+

    ##Tests

    Run make install, then make test, then go to http://localhost:8000/test

    Show All