HTML5路由器：router5
jopen
9年前
router5是一个HTML5 路由器，简单并且强大。基于 route-node 和 path-parser。
特性
- Use of hash (#)
- Default start route: a default route to navigate to on load if the current URL doesn't match any route. Similar to$routeProvider.otherwise()in Angular ngRoute module.
- Start and stop router
- Nested named routes: routes are identified by names and parameters so you don't have to manipulate URLs directly. Routes can be nested, introducing the notion of route segments.
- Route change listeners: listen to any route change, or register listeners for a specific route.
- Route node change listeners: you can add listeners to be triggered on a specific named route node. They will be triggered if that named route node is the node a component tree needs to be re-rendered from.
- Segments deactivation: you can register segment components. On a route change, it will ask those components through theircanDeactivatemethod if they allow navigation. Similar to Angular 2 and Aurelia routers.
- You are in control! You decide what to do on a route change and how to do it.
// Route definitions var router = new Router5() .setOption('useHash', true) // Users .addNode('users', '/users') .addNode('users.view', '/view/:id') .addNode('users.list', '/list') // Orders .addNode('orders', '/orders') .addNode('orders.completed', '/completed') .addNode('orders.pending', '/pending') .addNode('orders.view', '/details/:id') // Listener .addListener(drawGraph) // Start .start(); function drawGraph(toState, fromState) { /* ... */ } // Init drawGraph(router.getState());