Kitbag Router

Appearance

Migrating from vue-router ​

✅ Nested routes mapping
✅ Dynamic Routing
✅ Modular, component-based router configuration
✅ Route params, query, wildcards
✅ View transition effects powered by Vue.js' transition system
✅ Fine-grained navigation control
✅ Links with automatic active CSS classes
✅ HTML5 history mode or hash mode
❌ Customizable Scroll Behavior
✅ Proper encoding for URLs

Child Routes ​

Child routes in vue-router have very different behavior depending on if the path starts with "/" or not. In Kitbag Router, the behavior is always the same, so add slashes where you want them and leave them off where you don't.

Route Regex ​

Kitbag Router support FULL regex pattern matching in both the path and query. The only caveat is that your regex must be encapsulated by a param.

ts
import { path } from '@kitbag/router'

path('/[pattern]', { pattern: /[\d{2}]-[\d{2}]-[\d{4}]/g })

The param will be used to verify any potential matches from the URL, regardless of if you actually use the param value stored on route.params.

Repeatable Params ​

Kitbag Router DOES support repeatable params like vue-router, but the syntax is different.