Simple routes ​

v-route component ​

vanille implements a very simple and straightforward routing system.

Simply import:

import '@vanille/core/Route';

import '@vanille/core/Route';

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

<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.

// 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.

<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:

<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:

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

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