• Version 1.5.0
  • Published
  • 235 kB
  • 7 dependencies
  • MIT license


npm i aurelia-templating-router
yarn add aurelia-templating-router
pnpm add aurelia-templating-router


An implementation of the RouteLoader interface for use with the router module. Also contains a custom element that allows the templating engine to display the current route.



function configure

configure: (config: IFrameworkConfiguration) => void;


    class RouteHref

    class RouteHref {}
    • Helper custom attribute to help associate an element with a route by name


    constructor(router: Router, element: Element);

      property attribute

      attribute: string;
      • Target property on a custom element if this attribute is put on a custom element OR an attribute if this attribute is put on a normal element

      property element

      readonly element: Element;
      • Element this attribute is associated with

      property params

      params: Record<string, any>;
      • Parameters of this attribute to generate URL.

      property route

      route: string;
      • Name of the route this attribute refers to. This name should exist in the current router hierarchy

      property router

      readonly router: Router;
      • Current router of this attribute

      method attributeChanged

      attributeChanged: (value: any, previous: any) => Promise<void>;

        method bind

        bind: () => void;

          method processChange

          processChange: () => Promise<void>;

            method unbind

            unbind: () => void;

              class RouterView

              class RouterView {}
              • Implementation of Aurelia Router ViewPort. Responsible for loading route, composing and swapping routes views


              element: Element,
              container: Container,
              viewSlot: ViewSlot,
              router: Router,
              viewLocator: ViewLocator,
              compositionTransaction: CompositionTransaction,
              compositionEngine: CompositionEngine

                property container

                container: Container;
                • Container at this level

                property element

                readonly element: Element;
                • Element associated with this custom element

                property layoutModel

                layoutModel?: any;
                • Layout model used to activate layout view model, if specified with layoutViewModel

                property layoutView

                layoutView?: any;
                • Layout view used for this router-view layout, if no layout-viewmodel specified

                property layoutViewModel

                layoutViewModel?: any;
                • Layout view model used as binding context for this router-view layout Actual type would be {string | Constructable | object}

                property router

                readonly router: Router;
                • Current router associated with this

                property swapOrder

                swapOrder?: 'before' | 'after' | 'with';
                • Swapping order when going to a new route. By default, supports 3 value: before, after, with - before = new in -> old out - after = old out -> new in - with = new in + old out

                  These values are defined by swapStrategies export in aurelia-templating/ aurelia-framework Can be extended there and used here

                method bind

                bind: (bindingContext: any, overrideContext: OverrideContext) => void;

                  method created

                  created: (owningView: View) => void;

                    method process

                    process: ($viewPortInstruction: any, waitToSwap?: boolean) => Promise<void>;
                    • Implementation of aurelia-router ViewPort interface, responsible for templating related part in routing Pipeline

                    method swap

                    swap: ($viewPortInstruction: any) => void | Promise<void>;

                      class RouterViewLocator

                      class RouterViewLocator {}
                      • Locator which finds the nearest RouterView, relative to the current dependency injection container.


                      • Creates an instance of the RouterViewLocator class.

                      method findNearest

                      findNearest: () => Promise<RouterView>;
                      • Finds the nearest RouterView instance.


                        A promise that will be resolved with the located RouterView instance.

                      class TemplatingRouteLoader

                      class TemplatingRouteLoader extends RouteLoader {}
                      • Default implementation of RouteLoader used for loading component based on a route config


                      constructor(compositionEngine: CompositionEngine);

                        method loadRoute

                        loadRoute: (
                        router: Router,
                        config: RouteConfig,
                        navInstruction: NavigationInstruction
                        ) => Promise<any>;
                        • Load corresponding component of a route config of a navigation instruction


                        interface IFrameworkConfiguration

                        interface IFrameworkConfiguration {}

                          property container

                          container: Container;

                            method globalResources

                            globalResources: (...args: any[]) => this;

                              method singleton

                              singleton: (...args: any[]) => this;

                                Package Files (1)

                                Dependencies (7)

                                Dev Dependencies (32)

                                Peer Dependencies (1)


                                To add a badge like this badgeto your package's README, use the codes available below.

                                You may also use to create a custom badge linking to

                                • Markdown
                                • HTML
                                  <a href=""><img src="" alt=""></a>