Navigation URL Routing Options

I am able to set up query parameters for passing data between pages, but is it possible to pass data between pages any other way (aside from local storage)?

In particular, I’d like to do route-based parameter passing e.g. instead of myuibakeryapp.com/page-name?param=2 I’d like to do myuibakeryapp.com/page-name/2.

Hi!

Unfortunately, route-based parameter passing is not possible as nested pages exist:

Ah, I see, thanks for the info @spherebread! That’s too bad…

Could you please link me to the docs explaining the semantics of nested pages? I take it I set them up using the parent-child link when I create a new page? I’m not sure I understand the intention behind them and why I’d choose to use them over unnested pages.

In any case, are the only ways to pass data between pages local storage and query parameters?

There are no specific semantic or related docs — you got it right, just set them up with parent-child link and that’s it!

Intention is quite simple — to give user a visual structure (and URL path representation) of your app for easier navigation.
image

Also, nested pages will be used in such components as Menu and Horizontal Menu for auto-generated structure:

And yes, the only ways to pass data between pages — Local Storage and Query Params.

May I ask you to create a feature request on roadmap.uibakery.io regarding route-based parameter passing? It will help us to gather feedback of other clients and asses demand of this feature.

Ahh I see! Thanks @spherebread! I will submit a request when I have a moment. Route based parameters akin to Django and many other frameworks would be very nice to have!

1 Like

@spherebread I’ve made some progress using query parameters, but just wanted to clarify something:

On my first page, I have a button that will set a query parameter and navigate to a different page when clicked. That works, and when I get to the second page I can access the query parameter using {{activeRoute.queryParams["my-query-param"]}}. But during development this value is undefined, which means no data is loading in the dev environment.

Is there any way for me to populate that value so that I see real data while working?

I’ve found that I can use || to specify a default value. Just need to be sure that this never makes it into production!