Skip to content

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.

Props Binding

With vue-router you can bind all the route params to the component automatically with the route.props attribute. However, this is NOT type safe. Kitbag Router gives you a type safe way to bind props. If the component you assign to a route has required props, you'll get a Typescript error until you satisfy the props.

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. By default Kitbag params capture everything including slashes, so a route that ends in a param will be considered a match.

ts
{
  name: 'repeated-params',
  path: '/[chapters]',
  component: ...
},

This param will expect at least (1) character past the slash to match, but will match

  • /one
  • /one/two
  • /one/two/three
  • etc

Then to convert the captured value into an array, you'll need to define a custom param.

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

const stringArrayParam: ParamGetSet<string[]> = {
  get: (value) => {
    return value.split('/')
  },
  set: value => value.join('/'),
}

Which is applied to the route with path.

ts
{
  name: 'repeated-params',
  path: path('/[chapters]', { chapters: stringArrayParam }),
  component: ...
},

If you make the param optional, it will also match just a slash /, the param value would be an empty array [].

Redirect

In order to setup redirects for your routes, you'll have to use route hooks.

ts
{
  name: 'old-route',
  path: '/old',
  onBeforeRouteEnter: (to, { replace }) => {
    replace('new-route')
  }
},
{
  name: 'new-route',
  path: '/new',
  component: ...
}

Alias

If you need additional routes that ultimately result in another route being loaded, for now you'll need to define those routes and have them redirect.

ts
{
  name: 'actual-route',
  path: '/new',
  component: ...
},
{
  name: 'alias-route-a',
  path: '/alias-a',
  onBeforeRouteEnter: (to, { replace }) => {
    replace('actual-route')
  }
},
{
  name: 'alias-route-b',
  path: '/alias-b',
  onBeforeRouteEnter: (to, { replace }) => {
    replace('actual-route')
  }
},

Named Route

Currently Kitbag Router has a 1:1 relationship between a route and a component. However, support for a feature like Named Routes is planned and tracked by this issue.