Aurelia 2 Router Layout

Is there a way to use router layouts?
Something like this in v1

 <router-view layout-view="default-layout.html"></router-view>

Thanks

Hi @liidtke! It is not yet implemented for router-lite (and as per me knowledge that is also the case for router).

If I get it correctly, this is like master pages in aspx world. IMO, it is a shell component that accepts projected content from outside and that it has little to do with routing. With the introduction of slot/au-slot that is now easy (note that the router layout is a pre-slot-era concept). Thus, it boils down to: you create a shell component with projection slot(s) in it, you use it and target the correct slot when there are more than one.

I would probably create one such layout/shell/master-page for the app, use it for the “root” component that houses the top level au-viewport and that should suffice. Below is a hypothetical example.

<!-- master-page -->
<nav-bar></nav-bar>
<au-viewport></au-viewport>
<!-- 
   feel free to use slot/au-slot to support custom content projection, 
   as per your need. 
-->


<!-- use the master-page in your app root -->
<master-page></master-page>

Do you think, that it would suffice your requirement? If not, please provide details. It would be awesome, if you can share an example that showcase the problem that cannot be addressed using this approach.

Cheers :v:

Thanks for the answer!

Similar to your case, I just don’t want to render our nav-bar in some cases/pages.
I can definitively live without this feature, a little bit of css does the trick. (or use content projection, will see).

Cheers

1 Like