Page without route?

Help Requests
1

So I have site I am porting and so far things work well with routes in app.ts.
My app.html is pretty standard and has a header something like

<template>
  <header>
  <nav-bar router.bind="router"></nav-bar>
  </header>
  <main>
    <div>
      <router-view></router-view>
    </div>
  </man>
</template>

On some pages though I don’t want the header. Is there a way to add a route that does not use the default app.html template ?

Thanks

2

Add it to your route object literal. Then you can access it via routers event ‘router:navigation:complete’.

// route config
{ route: ['normal-page'],       name: 'normal-page',       moduleId: 'views/normal-page',  showHeader:true },
{ route: ['no-nav-page'],       name: 'no-nav-page',       moduleId: 'views/no-nav-page',  showHeader:false }

then in your app viewmodel

import { inject } from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class App {
    showHeader = true;

    constructor(eventAggregator) {
        this.eventAggregator= eventAggregator;
    }

    bind(){
        this.eventAggregator.subscribe('router:navigation:complete', () => {
            this.showHeader = this.router.currentInstruction.config.showHeader;
        });
    }    
}

<template>
  <header show.bind="showHeader">
  <nav-bar router.bind="router"></nav-bar>
  </header>
  <main>
    <div>
      <router-view></router-view>
    </div>
  </man>
</template>
2 Likes
3

Thanks. That seems to work.
I was messing around with layoutView in the router. However, I couldn’t get the routes to be accessible to the nav-bar.html.

This seems a simpler solution.

Thanks

4

I recommend using one of the following strategies:

Router view ports

If you have a nav-bar area that you want to populate with different things, sometimes empty, then use a router view port. Example: https://bl.ocks.org/lstarky/b6af53f1d63b9f580b8215f58661b879

Multiple shells

If, for example, you have welcome page or pages that doesn’t need nav, and then app pages that do need nav, consider using multiple shells. This is the best practice when you have a fundamentally different section of the application: http://www.foursails.co/blog/aurelia-login-best-practices-pt-1/

1 Like