feat(vue3-bridge): reconstruct nested route (#4117)

Co-authored-by: willxywang <[email protected]>
Co-authored-by: Zack Jackson <[email protected]>
Co-authored-by: CocooDanielle <[email protected]>

Author: 4 people

apps/router-demo/router-remote3-2003/src/pages/Profile.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-2xl font-bold mb-4">Settings Page</h1>
+    <p>This is the settings page for Router Remote 3.</p>
+  </div>
+</template>

apps/router-demo/router-remote3-2003/src/pages/Settings.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-2xl font-bold mb-4">Settings Page</h1>
+    <p>This is the settings page for Router Remote 3.</p>
+  </div>
+</template>

apps/router-demo/router-remote3-2003/src/router.ts

@@ -5,13 +5,28 @@ import {
 } from 'vue-router';
 import Home from '@/pages/Home.vue';
 import Detail from '@/pages/Detail.vue';
+import Settings from '@/pages/Settings.vue';
+import Profile from '@/pages/Profile.vue';
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
     // 在这里定义你的路由
-    { path: '/', component: Home },
-    { path: '/detail', component: Detail },
+    {
+      path: '/',
+      component: Home,
+      children: [
+        {
+          path: 'profile',
+          component: Profile,
+          children: [{ path: 'settings', component: Settings }],
+        },
+      ],
+    },
+    {
+      path: '/detail',
+      component: Detail,
+    },
     // 其他路由
   ],
 });