[feature] Add support for all route params

tests/selenium/test_vuerouter.py

@@ -64,3 +64,108 @@ class ComponentUsingRouter(VueComponent):
         assert selenium.element_present("link")
         selenium.find_element_by_id("link").click()
         assert selenium.element_has_text("user", "123")
+
+
+def test_named_routes(selenium):
+    def app(el):
+        from vue import VueComponent, VueRouter, VueRoute
+
+        class FooTop(VueComponent):
+            template = '<div id="header">foo top</div>'
+
+        class FooBottom(VueComponent):
+            template = '<div id="body">foo bottom</div>'
+
+        class BarTop(VueComponent):
+            template = '<div id="header">bar top</div>'
+
+        class BarBottom(VueComponent):
+            template = '<div id="body">bar bottom</div>'
+
+        class Router(VueRouter):
+            routes = [
+                VueRoute("/foo", components={"default": FooBottom, "top": FooTop}),
+                VueRoute("/bar", components={"default": BarBottom, "top": BarTop}),
+            ]
+
+        class ComponentUsingRouter(VueComponent):
+            template = """
+                <div>
+                    <p>
+                        <router-link to="/foo" id="foo">Go to Foo</router-link>
+                        <router-link to="/bar" id="bar">Go to Bar</router-link>
+                    </p>
+                    <router-view name="top"></router-view>
+                    <hr>
+                    <router-view></router-view>
+                </div>
+            """
+
+        return ComponentUsingRouter(el, router=Router())
+
+    with selenium.app(app, config=VueRouterConfig):
+        assert selenium.element_present("foo")
+        selenium.find_element_by_id("foo").click()
+        assert selenium.element_has_text("header", "foo top")
+        assert selenium.element_has_text("body", "foo bottom")
+
+        assert selenium.element_present("bar")
+        selenium.find_element_by_id("bar").click()
+        assert selenium.element_has_text("header", "bar top")
+        assert selenium.element_has_text("body", "bar bottom")
+
+
+def test_nested_routes_and_redirect(selenium):
+    def app(el):
+        from vue import VueComponent, VueRouter, VueRoute
+
+        class UserHome(VueComponent):
+            template = '<div id="home">Home</div>'
+
+        class UserProfile(VueComponent):
+            template = '<div id="profile">Profile</div>'
+
+        class UserPosts(VueComponent):
+            template = '<div id="posts">Posts</div>'
+
+        class ComponentUsingRouter(VueComponent):
+            template = """
+                <div>
+                    <p>
+                        <router-link to="/user/foo" id="link-home">/user/foo</router-link>
+                        <router-link to="/user/foo/profile" id="link-profile">/user/foo/profile</router-link>
+                        <router-link to="/user/foo/posts" id="link-posts">/user/foo/posts</router-link>
+                    </p>
+                    <h2>User {{ $route.params.id }}</h2>
+                    <router-view></router-view>
+                </div>
+            """
+
+        class Router(VueRouter):
+            routes = [
+                VueRoute("/", redirect="/user/foo"),
+                VueRoute(
+                    "/user/:id",
+                    ComponentUsingRouter,
+                    children=[
+                        VueRoute("", UserHome),
+                        VueRoute("profile", UserProfile),
+                        VueRoute("posts", UserPosts),
+                    ],
+                ),
+            ]
+
+        return ComponentUsingRouter(el, router=Router())
+
+    with selenium.app(app, config=VueRouterConfig):
+        assert selenium.element_present("link-home")
+        selenium.find_element_by_id("link-home").click()
+        assert selenium.element_has_text("home", "Home")
+
+        assert selenium.element_present("link-profile")
+        selenium.find_element_by_id("link-profile").click()
+        assert selenium.element_has_text("profile", "Profile")
+
+        assert selenium.element_present("link-posts")
+        selenium.find_element_by_id("link-posts").click()
+        assert selenium.element_has_text("posts", "Posts")

tests/unit/test_factory/test_router.py

@@ -6,6 +6,37 @@ def test_path_and_component(self):
         route = VueRoute("/path", VueComponent)
         assert route == {"path": "/path", "component": VueComponent.init_dict()}
 
+    def test_path_and_components(self):
+        route = VueRoute(
+            "/path", components={"default": VueComponent, "named": VueComponent}
+        )
+        assert route == {
+            "path": "/path",
+            "components": {
+                "default": VueComponent.init_dict(),
+                "named": VueComponent.init_dict(),
+            },
+        }
+
+    def test_path_and_components_and_children(self):
+        route = VueRoute(
+            "/path",
+            VueComponent,
+            children=[VueRoute("/path", VueComponent), VueRoute("/path2", VueComponent),],
+        )
+        assert route == {
+            "path": "/path",
+            "component": VueComponent.init_dict(),
+            "children": [
+                {"path": "/path", "component": VueComponent.init_dict()},
+                {"path": "/path2", "component": VueComponent.init_dict()},
+            ],
+        }
+
+    def test_path_and_redirect(self):
+        route = VueRoute("/path", redirect="/path2")
+        assert route == {"path": "/path", "redirect": "/path2"}
+
 
 class TestVueRouter:
     def test_routes(self):

vue/router.py

@@ -12,5 +12,14 @@ def __new__(cls):
 
 
 class VueRoute:
-    def __new__(cls, path, component):
-        return {"path": path, "component": component.init_dict()}
+    def __new__(cls, path, component=None, components=None, **kwargs):
+        route = {"path": path, **kwargs}
+
+        if component is not None:
+            route["component"] = component.init_dict()
+        elif components is not None:
+            route["components"] = {
+                name: component.init_dict() for name, component in components.items()
+            }
+
+        return route