Programmatic Navigation using Router

[SergeyYakubov]

Hi,

if I have a router (like here, how can I navigate to a page programmatically? In Vue one can call router.push('/mypage'), can I do that via a JS Client in Trame?

[jourdain]

Yes, you can do VBtn("Go", click="$router.push('/mypage')") or do the following to have access to it from Python

self.server.controller.router_goto = client.JSEval(exec="$router.push($event)").exec

[SergeyYakubov]

it works with button, but I get

    self.server.controller.router_goto()
  File ".../Caches/pypoetry/virtualenvs/garnet-jITK1Fu2-py3.10/lib/python3.10/site-packages/trame_server/controller.py", line 334, in __call__
    result = f(*args, **kwargs)
  File ".../Caches/pypoetry/virtualenvs/garnet-jITK1Fu2-py3.10/lib/python3.10/site-packages/trame_client/widgets/trame.py", line 83, in exec
    self.server.js_call(self.__ref, "exec")
AttributeError: 'NoneType' object has no attribute 'js_call'

when trying to use it from Python

[jourdain]

1. If you call self.server.controller.router_goto() with no arg, you are just calling $router.push() which won't be great. So please pass the url you want to go to as arg.
2. If your JSEval element is put in a router view instead of the main one, it may not exist based on the route you are looking at.

[SergeyYakubov]

1. I hardcoded the url for now
2. I think I put it into the main code. From the error - self.server is None, which is strange. This is the code, if you have a moment to take a look at it:
   https://code.ornl.gov/ndip/trame-apps/garnet/-/blob/routes/garnet/app/views/main.py?ref_type=heads

[jourdain]

Ah, that make sense... This is a widget, therefore, it needs to belong to a layout.
See my comment in 2. I thought you've added it in a RouterViewLayout, but that was not even the issue since it was not even linked to a UI at all.

To fix the issue, just put it above or below your client.Style(".v-label { opacity: 100; }") line.

[SergeyYakubov]

thank you, that worked!