Router-lite to Build Navigation Menu

Help Requests
1

I use the router-lite in my applications and build a navigation menu. I have a route that has some optional parameters. For building a menu, they do not come into play however, the path is something like some-component/:parm1?/:parm2? and when I get the page, the params passed to canLoad are params.parm1 = “:parm1” and params.parm2 = undefined.

If it were consistent between the two parameters I would feel better about it. My code in canLoad looks something like this:

    if ((params.parm1 && params.parm2) || (!params.parm1 && !params.parm2)) {
            ... set parm1 and 2 and return true.
    }

I’m not sure if this is something to be expected, but because it was inconsistent between how the two parameters were passed, it seems more likely that this isn’t expected behavior or more likely, I did something wrong. It did just occur to me that the question is probably changing the second parameter to a query string, which is not supported in router-lite.

Is there a way to get a simplified path from route.path? Maybe I need to trim off anything after /: if it exists?

Thank you!

1 Like
2

How are you specifying your paths in HTML, are they href values or are you using the load attribute?

3

@elmt1 The navigation model does not alter the routes in any way. My suggestion would be to add a path that defines no parameters and use that path to build the menu. You can employ a value convert to filter out the routes. Here is one such example: router-lite - navigation-model - StackBlitz. You can even employ a value converter to replace the parameter placeholders with some default values, as you see fit.

Using a parameterized path to create a menu sounds conflicting to the idea of having a menu, as such paths are generally non-parameterized. As paths such as some-component/:parm1?/:parm2? are never meant to be bound to either href or load attribute, any resulting behaviour is unsupported.

4

I ended up with something like this:

<a href.bind="menuItem.route.path | stripRouteParams" class="nav-link" click.trigger="setActive(menuItem)">
    <i class="${menuItem.icon}"></i>&nbsp;&nbsp;${menuItem.title || menuItem.route.title}
</a>

I was using some of the examples that showed building a menu from the navigation model. It worked OK until I had a path that needed to use a user id and token to authenticate in some situations, but for an authenticated user appears in the menu. I ended up creating a value converter to strip the parameters.