完成嵌套路由的的demo

demo/router-children_router/App.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <router-link :to="{name:'home'}">home</router-link>
+    |
+    <router-link :to="{name:'user'}">users</router-link>
+  </div>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+<script setup>
+
+</script>

demo/router-children_router/components/User/ChangeUser.vue

@@ -0,0 +1,14 @@
+<template>
+  <h3>这是ChangeUser</h3>
+</template>
+
+<script>
+export default {
+  name: "ChangeUser"
+}
+</script>
+
+
+<style scoped>
+
+</style>

demo/router-children_router/components/User/UserInfo.vue

@@ -0,0 +1,14 @@
+<template>
+  <h3>这是UserInfo</h3>
+</template>
+
+<script>
+export default {
+  name: "UserInfo"
+}
+</script>
+
+
+<style scoped>
+
+</style>

demo/router-children_router/main.js

@@ -0,0 +1,5 @@
+import {createApp} from "vue";
+import App from "./App.vue"
+import router from './router'
+
+createApp(App).use(router).mount('#app')

demo/router-children_router/router/index.js

@@ -0,0 +1,48 @@
+// 引入必要的router组件
+import {createRouter, createWebHistory} from 'vue-router'
+// 引入视图
+const Home = () => import('../views/Home/Home.vue')
+const UserIndex = () => import('../views/User/UserIndex.vue')
+
+// 引入组件
+const change_user = () => import('../components/User/ChangeUser.vue')
+const user_info = () => import('../components/User/UserInfo.vue')
+
+// 创建路由，如果同一个路由中包含多个组件，则将component改名为components（加s），已对像的形式加添加多个组件，对象中的key是对象的名称， 可以在视图中使用此名称指定组件
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        component: Home
+    },
+    {
+        path: '/user',
+        name: 'user',
+        component: UserIndex,
+        // redirect 设置默认显示的页面
+        redirect: '/user/info',
+        // 定义嵌套路由, 子路径不要加'/'，加了'/' 请求路径是/info，不加的请求是/user/info
+        children: [
+            {
+                path: 'info',
+                name: 'info',
+                component: user_info,
+            },
+            {
+                path: 'change',
+                name: 'change',
+                component: change_user,
+            }
+        ]
+    }
+]
+
+// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
+// 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+// 导出路由
+export default router

demo/router-children_router/views/Home/Home.vue

@@ -1,13 +1,14 @@
 <template>
-  <h3>这是Header1</h3>
+  <h1>这是Home</h1>
 </template>
 
 <script>
 export default {
-  name: "Header1"
+  name: "Home"
 }
 </script>
 
+
 <style scoped>
 
 </style>

demo/router-children_router/views/User/UserIndex.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <ul>
+      <li>
+        <router-link :to="{name:'info'}">个人信息</router-link>
+      </li>
+      <li>
+        <router-link :to="{name:'change'}">用户设置</router-link>
+      </li>
+    </ul>
+  </div>
+  <div>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "UserIndex"
+}
+</script>
+
+
+<style scoped>
+
+</style>

src/App.vue

@@ -1,11 +1,12 @@
 <template>
-  <nav>
+  <div>
-    <router-link to="/"><span>Home</span></router-link>
+    <router-link :to="{name:'home'}">home</router-link>
     |
-    <router-link :to="{name:'about'}"><span>About</span></router-link>
+    <router-link :to="{name:'user'}">users</router-link>
-  </nav>
+  </div>
-  <router-view name="header"/>
+  <div>
-  <router-view/>
+    <router-view></router-view>
+  </div>
 </template>
 <script setup>
 

src/components/User/ChangeUser.vue

@@ -0,0 +1,14 @@
+<template>
+  <h3>这是ChangeUser</h3>
+</template>
+
+<script>
+export default {
+  name: "ChangeUser"
+}
+</script>
+
+
+<style scoped>
+
+</style>

src/components/User/UserInfo.vue

@@ -0,0 +1,14 @@
+<template>
+  <h3>这是UserInfo</h3>
+</template>
+
+<script>
+export default {
+  name: "UserInfo"
+}
+</script>
+
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -1,31 +1,40 @@
 // 引入必要的router组件
 import {createRouter, createWebHistory} from 'vue-router'
 // 引入视图
+const Home = () => import('../views/Home/Home.vue')
+const UserIndex = () => import('../views/User/UserIndex.vue')
 
-const Home = ()=>import('../views/HomeView.vue')
+// 引入组件
-const About = () => import('../views/AboutView.vue')
+const change_user = () => import('../components/User/ChangeUser.vue')
-const Header1 = () => import('../components/Header1.vue')
+const user_info = () => import('../components/User/UserInfo.vue')
-const Header2 = () => import('../components/Header2.vue')
-
 
 // 创建路由，如果同一个路由中包含多个组件，则将component改名为components（加s），已对像的形式加添加多个组件，对象中的key是对象的名称， 可以在视图中使用此名称指定组件
 const routes = [
     {
         path: '/',
         name: 'home',
-        components: {
+        component: Home
-            header: Header1,
-            default: Home,
-        }
     },
     {
-        path: '/about',
+        path: '/user',
-        name: 'about',
+        name: 'user',
-        components: {
+        component: UserIndex,
-            header: Header2,
+        // redirect 设置默认显示的页面
-            default: About,
+        redirect: '/user/info',
-        }
+        // 定义嵌套路由, 子路径不要加'/'，加了'/' 请求路径是/info，不加的请求是/user/info
-    },
+        children: [
+            {
+                path: 'info',
+                name: 'info',
+                component: user_info,
+            },
+            {
+                path: 'change',
+                name: 'change',
+                component: change_user,
+            }
+        ]
+    }
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes

src/views/AboutView.vue

@@ -1,12 +0,0 @@
-<template>
-  <h3>这是About</h3>
-</template>
-
-<script>
-export default {
-  updated() {
-    console.log(this.$route.query)
-    console.log(this.$route.params)
-  }
-}
-</script>

src/views/Home/Home.vue

@@ -1,13 +1,14 @@
 <template>
-  <h3>这是Header2</h3>
+  <h1>这是Home</h1>
 </template>
 
 <script>
 export default {
-  name: "Header2"
+  name: "Home"
 }
 </script>
 
+
 <style scoped>
 
 </style>

src/views/HomeView.vue

@@ -1,3 +0,0 @@
-<template>
-  <h3>这是Home</h3>
-</template>

src/views/User/UserIndex.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <ul>
+      <li>
+        <router-link :to="{name:'info'}">个人信息</router-link>
+      </li>
+      <li>
+        <router-link :to="{name:'change'}">用户设置</router-link>
+      </li>
+    </ul>
+  </div>
+  <div>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "UserIndex"
+}
+</script>
+
+
+<style scoped>
+
+</style>