# Page without route?

**URL:** <https://discourse.aurelia.io/t/page-without-route/501>\
**Category:** Help Requests\
**Created:** [December 6, 2017, 11:20am UTC](https://discourse.aurelia.io/t/page-without-route/501 "2017-12-06T11:20:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![glennpierce](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/glennpierce/32/743_2.png) [@glennpierce](https://discourse.aurelia.io/u/glennpierce)\
**Post date:** [December 6, 2017, 11:20am UTC](https://discourse.aurelia.io/t/page-without-route/501/1 "2017-12-06T11:20:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [December 6, 2017, 2:16pm UTC](https://discourse.aurelia.io/t/page-without-route/501/2 "2017-12-06T14:16:28Z")

</div>

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

```auto
// 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

```auto
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;
        });
    }    
}

```

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

```

---

<div class="post-metadata">

**Author:** ![glennpierce](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/glennpierce/32/743_2.png) [@glennpierce](https://discourse.aurelia.io/u/glennpierce)\
**Post date:** [December 6, 2017, 3:05pm UTC](https://discourse.aurelia.io/t/page-without-route/501/3 "2017-12-06T15:05:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![davismj](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davismj/32/267_2.png) [@davismj](https://discourse.aurelia.io/u/davismj)\
**Post date:** [December 12, 2017, 3:23pm UTC](https://discourse.aurelia.io/t/page-without-route/501/4 "2017-12-12T15:23:12Z")

</div>

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](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/](http://www.foursails.co/blog/aurelia-login-best-practices-pt-1/)