Skip to content

# Simple routes ​

## `v-route` component ​

`vanille` implements a very simple and straightforward routing system.

Simply import:

ts

    import '@vanille/core/Route';

    import '@vanille/core/Route';

This will add `Route` to `customElements` and you can use it as:

tsx

    <v-route path="/">Home</v-route>

    <v-route path="/">Home</v-route>

## `path` attribute ​

When the `location` matches the given value set to `path`, the `slot` will be rendered.

tsx

    // https://dannyyassine.github.io/vanille

    <v-route path="/">
      Home // not rendered
    </v-route>

    <v-route path="/vanille">
      Dashboard // rendered
    </v-route>

    // https://dannyyassine.github.io/vanille

    <v-route path="/">
      Home // not rendered
    </v-route>

    <v-route path="/vanille">
      Dashboard // rendered
    </v-route>

## `startsWith` attribute ​

Similar to `String.prototype.startsWith`, `v-route` checks if the url path matches the beginning pattern set in the `startsWith` attribute.

tsx

    <v-route startsWith="/app"></v-route>

    <v-route startsWith="/app"></v-route>

All routes beginning with `/app` will be rendered:

- `/app/dashboard`
- `/app/settings`
- `/app/user/1`

Very useful when configuring routes based on a mandatory login screen:

jsx

    <v-route path="/login">
      Login
    </v-route>

    <v-route starsWith="/app">
      <nav></nav>
      <v-route path="/app/dashboard">
        Dashboard
      </v-route>
      <v-route path="/app/settings">
        Dashboard
      </v-route>
    </v-route>

    <v-route path="/login">
      Login
    </v-route>

    <v-route starsWith="/app">
      <nav></nav>
      <v-route path="/app/dashboard">
        Dashboard
      </v-route>
      <v-route path="/app/settings">
        Dashboard
      </v-route>
    </v-route>

## Params in the url ​

`vanille` offers very simple matching logic to render routes with params like `:id`:

tsx

    <v-route path="/users/:id">User with id</v-route>

    <v-route path="/users/:id">User with id</v-route>