Alpine Router

Install

npm install --save alpine-router

Instructions

Initialize Router

          
import Router from 'alpine-router';

const router = new Router([
  {
    path: '/',
    template: `<h1>Hello World!</h1>`
  }
]);

Add Base Tag

A base tag is required in the head for friendly urls. If you wish to use hash urls or are loading from a file system instead of a server do not add the base tag.

          <base href="/">

Add Router Outlet

Add the router outlet to the body to render templates in.

          <router-outlet></router-outlet>

Navigate

To change routes use the navigate function.

          router.navigate('/');

Child Routes

Child routes are nested inside a parent route using the children property. For the child route to load, a router-outlet tag is required in the parents template.

          
const router = new Router([
  {
    path: 'parent',
    template: `<h1>Parent</h1><router-outlet></router-outlet>`,
    children: [
      {
         path: 'child',
         template: `<h2>Child</h2>`
      }
    ]
  }
]);

External Templates

To retrieve an external template, use templateUrl instead of template

          
const router = new Router([
  {
    path: '/',
    templateUrl: 'templates/example.html'
  }
]);

Demo

Root
Parent
Child
External

Alpine|Router