loading correct route on page init

examples/single_page_app/main.py

@@ -22,12 +22,16 @@ async def show_three():
     ui.label('Content Three').classes('text-2xl')
 
 
-with ui.row():
-    ui.button('One', on_click=lambda: router.open(show_one)).classes('w-32')
-    ui.button('Two', on_click=lambda: router.open(show_two)).classes('w-32')
-    ui.button('Three', on_click=lambda: router.open(show_three)).classes('w-32')
-
-# this places the frame for the content which should be displayed
-router.frame().classes('w-full pt-8')
+@ui.page('/')  # normal index page (eg. the entry point of the app)
+@ui.page('/{_:path}')  # all other pages will be handled by the router but must be registered to also show the SPA index page
+async def main():
+    # adding some navigation buttons to switch between the different pages
+    with ui.row():
+        ui.button('One', on_click=lambda: router.open(show_one)).classes('w-32')
+        ui.button('Two', on_click=lambda: router.open(show_two)).classes('w-32')
+        ui.button('Three', on_click=lambda: router.open(show_three)).classes('w-32')
+
+    # this places the content which should be displayed
+    router.frame().classes('w-full pt-8')
 
 ui.run()

examples/single_page_app/router.py

@@ -36,6 +36,4 @@ class Router():
 
     def frame(self):
         self.content = ui.element('router_frame').on('open', lambda msg: self.open(msg['args']))
-        with self.content:
-            ui.label('Loading...').classes('text-2xl')
         return self.content

examples/single_page_app/router_frame.js

@@ -3,10 +3,16 @@ export default {
   mounted() {
     window.addEventListener("popstate", (event) => {
       if (event.state && event.state.page) {
-        console.log(event.state.page);
         this.$emit("open", event.state.page);
       }
     });
+    console.log(window.location.pathname);
+    this.$nextTick(() => {
+      // FIXME this delay is a hack to make sure the event can actually be handled by the backend
+      setTimeout(() => {
+        this.$emit("open", window.location.pathname);
+      }, 1000);
+    });
   },
   props: {},
 };