Best way to achive a classic web application layout


I need some help with an classic web application layout where we deal with an public area (login, lost password, registration) and an member area.
the public area has no navbar on top and no navbar on left side (classic menu).
after a user has logged in, he has a layout with a navbar on top, a navigation menu on left and a main content.
how is the best way to handle this? with one router and layouts? with 2 routers?

1 Like

I have tried 2 approaches. Both work, but none satisfy me:

First approach, I setRoot to a root page.
root.html only contains a <router-view>. Login / register / whatever is loaded there.
After logging in, app.html will be loaded into that <router-view>.
Inside app.html, I have navbar, sidebar, footer, a <router-view> for breadcrumb, and another <router-view> for subpages.
Pros: easy to wrap our head around, I guess…
Cons: all my authenticated routes are prepended with /app/, which is not too terrible but annoying

Second approach, I setRoot directly to app page.
app.html contains everything like above (navbar, sidebar, footer, and 2 <router-view>'s), but only the main is visible until user has logged in.
Pros: simple structure, no prepended route
Cons: uhm, my navbar et al. showed up fractions of a second before the login screen is replaced with the authenticated home screen, which is not too terrible but also annoying

You should be able to handle it with a single router. It’s hard to say what you really need since there are many questions that would need to be answered but one way you can look into is handling the showing of your nav items within your app.js/html and show/hide based on whether the user is authenticated <nav if.bind="isAuthenticated"></nav>. Note that using if.bind rather than show.bind will remove it from the DOM rather than setting display:none. Then in your routed viewmodels, look into canActivate hooks (see to allow/disallow viewing of those ViewModels. You could also setup a base class to handle any canActivate() methods on all the ViewModels that require it so you can keep it DRY.

Hm. I’ve got a PR in that in theory (haven’t tested it) would make the following possible:

Have three router-view in your app.html and name them nav-top, nav-left and default. Then, in configureRouter, add

config.viewPortDefaults = {
 'nav-top': { moduleId: 'nav-top' }, 'nav-left': { moduleId: 'nav-left' } };

and then for each route that shouldn’t have these router views, add

explicitViewPorts: true

to the route configuration. And yeah, that should do it, I think. In theory, anyway.

1 Like

Actually that’s a great way to handle the routes @jwx! You read more about it here: And here’s a great article on more advanced routing that also speaks to authorization:

I haven’t used multiple viewports before. Could you give an example of what the routes would look like given what you’ve defined here. I also don’t see any documentation for explicitViewPorts. Is this an old router value? Would this be handled differently now?