Aurelia Routing — Navigating Between Pages

// src/app.ts
import { RouterConfiguration, Router } from 'aurelia-router';
import { PLATFORM } from 'aurelia-pal';

export class App {
  router;

  configureRouter(config, router) {
    this.router = router;
    config.title = 'My App';
    config.options.pushState = true;
    config.options.root = '/';

    config.map([
      { route: '',            name: 'home',    moduleId: PLATFORM.moduleName('./home') },
      { route: 'about',       name: 'about',   moduleId: PLATFORM.moduleName('./about') },
      { route: 'contact',     name: 'contact', moduleId: PLATFORM.moduleName('./contact') },
      { route: 'products',    name: 'products', moduleId: PLATFORM.moduleName('./products') }
    ]);
  }
}

<!-- src/app.html -->
<template>
  <nav>
    <a route-href="route: home">Home</a>
    <a route-href="route: about">About</a>
    <a route-href="route: contact">Contact</a>
    <a route-href="route: products">Products</a>
  </nav>

  <router-view></router-view>
</template>

config.map([
  // Dynamic segments
  { route: 'products/:id',          name: 'product-detail', moduleId: PLATFORM.moduleName('./product-detail') },
  { route: 'users/:username',       name: 'user-profile',   moduleId: PLATFORM.moduleName('./user-profile') },
  { route: 'categories/:slug/posts/:postId', name: 'post',  moduleId: PLATFORM.moduleName('./post') },

  // Optional parameters
  { route: 'search/:query?',        name: 'search',         moduleId: PLATFORM.moduleName('./search') },

  // Wildcard route (404)
  { route: 'not-found',             name: 'not-found',      moduleId: PLATFORM.moduleName('./not-found') }
]);

// src/product-detail.ts
import { inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';

@inject(Router)
export class ProductDetail {
  constructor(router) {
    this.router = router;
  }

  activate(params, routeConfig) {
    this.productId = params.id;
    console.log('Loading product:', params.id);
    // Fetch product data using params.id
  }
}

// Programmatic navigation
export class NavComponent {
  constructor(router) {
    this.router = router;
  }

  goHome() {
    this.router.navigate('');
  }

  goToProduct(id) {
    this.router.navigateToRoute('product-detail', { id: id });
  }

  goToSearch(query) {
    this.router.navigateToRoute('search', { query: query });
  }

  goBack() {
    this.router.navigateBack();
  }

  refresh() {
    this.router.refresh();
  }

  redirectToLogin() {
    this.router.navigate('login', { replace: true, trigger: true });
  }
}

export class AdminRoute {
  canActivate(params, routeConfig, navigationInstruction) {
    // Check authentication
    if (!this.auth.isAuthenticated) {
      this.router.navigate('login');
      return false; // Cancel navigation
    }

    if (!this.auth.isAdmin) {
      this.router.navigate('forbidden');
      return false;
    }

    return true; // Allow navigation
  }

  activate(params) {
    // Route activated — load data
    return this.api.getAdminData();
  }

  canDeactivate() {
    // Confirm before leaving with unsaved changes
    if (this.hasUnsavedChanges) {
      return confirm('You have unsaved changes. Leave anyway?');
    }
    return true;
  }

  deactivate() {
    // Clean up resources
    this.dispose();
  }
}

// src/admin.ts — Parent component with child router
export class Admin {
  configureRouter(config, router) {
    config.map([
      { route: '',            name: 'dashboard',  moduleId: PLATFORM.moduleName('./admin/dashboard') },
      { route: 'users',       name: 'users',      moduleId: PLATFORM.moduleName('./admin/users') },
      { route: 'users/:id',   name: 'user-detail',moduleId: PLATFORM.moduleName('./admin/user-detail') },
      { route: 'settings',    name: 'settings',   moduleId: PLATFORM.moduleName('./admin/settings') }
    ]);
  }
}

<!-- src/admin.html — Parent layout with child router -->
<template>
  <div class="admin-layout">
    <aside>
      <a route-href="route: dashboard">Dashboard</a>
      <a route-href="route: users">Users</a>
      <a route-href="route: settings">Settings</a>
    </aside>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

import { Redirect } from 'aurelia-router';

export class AuthStep {
  run(navigationInstruction, next) {
    if (navigationInstruction.getAllInstructions().some(i => {
      return i.config.auth !== false;
    })) {
      // Check if user is authenticated
      if (!isAuthenticated) {
        return next.cancel(new Redirect('login'));
      }
    }
    return next();
  }
}

configureRouter(config, router) {
  config.addPipelineStep('authorize', AuthStep);
  config.map([...]);
}

<template>
  <div class="page">
    <!-- Loading indicator during route activation -->
    <div if.bind="router.isNavigating" class="loading-bar">
      Loading...
    </div>

    <!-- Error display -->
    <div if.bind="error" class="error-message">
      ${error.message}
    </div>

    <!-- Route content -->
    <router-view></router-view>
  </div>
</template>

// Hash-based URLs (default): #/products/123
config.options.pushState = false;

// HTML5 History API: /products/123 (requires server config)
config.options.pushState = true;
config.options.root = '/';