From 760688709ff9f819cf19217fdc2a01399b65a637 Mon Sep 17 00:00:00 2001
From: roger_home_pc <roger_sun@outlook.com>
Date: Tue, 19 Sep 2023 21:48:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=B5=8C=E5=A5=97=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E7=9A=84=E7=9A=84demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/router-children_router/App.vue           | 13 +++++
 .../components/User/ChangeUser.vue            | 14 ++++++
 .../components/User/UserInfo.vue              | 14 ++++++
 demo/router-children_router/main.js           |  5 ++
 demo/router-children_router/router/index.js   | 48 +++++++++++++++++++
 .../views/Home/Home.vue                       |  5 +-
 .../views/User/UserIndex.vue                  | 26 ++++++++++
 src/App.vue                                   | 13 ++---
 src/components/User/ChangeUser.vue            | 14 ++++++
 src/components/User/UserInfo.vue              | 14 ++++++
 src/router/index.js                           | 41 +++++++++-------
 src/views/AboutView.vue                       | 12 -----
 .../Header2.vue => views/Home/Home.vue}       |  5 +-
 src/views/HomeView.vue                        |  3 --
 src/views/User/UserIndex.vue                  | 26 ++++++++++
 15 files changed, 212 insertions(+), 41 deletions(-)
 create mode 100644 demo/router-children_router/App.vue
 create mode 100644 demo/router-children_router/components/User/ChangeUser.vue
 create mode 100644 demo/router-children_router/components/User/UserInfo.vue
 create mode 100644 demo/router-children_router/main.js
 create mode 100644 demo/router-children_router/router/index.js
 rename src/components/Header1.vue => demo/router-children_router/views/Home/Home.vue (67%)
 create mode 100644 demo/router-children_router/views/User/UserIndex.vue
 create mode 100644 src/components/User/ChangeUser.vue
 create mode 100644 src/components/User/UserInfo.vue
 delete mode 100644 src/views/AboutView.vue
 rename src/{components/Header2.vue => views/Home/Home.vue} (67%)
 delete mode 100644 src/views/HomeView.vue
 create mode 100644 src/views/User/UserIndex.vue

diff --git a/demo/router-children_router/App.vue b/demo/router-children_router/App.vue
new file mode 100644
index 0000000..2643dd1
--- /dev/null
+++ b/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>
diff --git a/demo/router-children_router/components/User/ChangeUser.vue b/demo/router-children_router/components/User/ChangeUser.vue
new file mode 100644
index 0000000..b45604e
--- /dev/null
+++ b/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>
diff --git a/demo/router-children_router/components/User/UserInfo.vue b/demo/router-children_router/components/User/UserInfo.vue
new file mode 100644
index 0000000..4a68d47
--- /dev/null
+++ b/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>
diff --git a/demo/router-children_router/main.js b/demo/router-children_router/main.js
new file mode 100644
index 0000000..ff25769
--- /dev/null
+++ b/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')
diff --git a/demo/router-children_router/router/index.js b/demo/router-children_router/router/index.js
new file mode 100644
index 0000000..1072cf6
--- /dev/null
+++ b/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
diff --git a/src/components/Header1.vue b/demo/router-children_router/views/Home/Home.vue
similarity index 67%
rename from src/components/Header1.vue
rename to demo/router-children_router/views/Home/Home.vue
index ba80fcf..e577f64 100644
--- a/src/components/Header1.vue
+++ b/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>
diff --git a/demo/router-children_router/views/User/UserIndex.vue b/demo/router-children_router/views/User/UserIndex.vue
new file mode 100644
index 0000000..0f4363a
--- /dev/null
+++ b/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>
diff --git a/src/App.vue b/src/App.vue
index 7cdf6f4..2643dd1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,12 @@
 <template>
-  <nav>
-    <router-link to="/"><span>Home</span></router-link>
+  <div>
+    <router-link :to="{name:'home'}">home</router-link>
     |
-    <router-link :to="{name:'about'}"><span>About</span></router-link>
-  </nav>
-  <router-view name="header"/>
-  <router-view/>
+    <router-link :to="{name:'user'}">users</router-link>
+  </div>
+  <div>
+    <router-view></router-view>
+  </div>
 </template>
 <script setup>
 
diff --git a/src/components/User/ChangeUser.vue b/src/components/User/ChangeUser.vue
new file mode 100644
index 0000000..b45604e
--- /dev/null
+++ b/src/components/User/ChangeUser.vue
@@ -0,0 +1,14 @@
+<template>
+  <h3>这是ChangeUser</h3>
+</template>
+
+<script>
+export default {
+  name: "ChangeUser"
+}
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/User/UserInfo.vue b/src/components/User/UserInfo.vue
new file mode 100644
index 0000000..4a68d47
--- /dev/null
+++ b/src/components/User/UserInfo.vue
@@ -0,0 +1,14 @@
+<template>
+  <h3>这是UserInfo</h3>
+</template>
+
+<script>
+export default {
+  name: "UserInfo"
+}
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 0d1e9ca..1072cf6 100644
--- a/src/router/index.js
+++ b/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 Header1 = () => import('../components/Header1.vue')
-const Header2 = () => import('../components/Header2.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',
-        components: {
-            header: Header1,
-            default: Home,
-        }
+        component: Home
     },
     {
-        path: '/about',
-        name: 'about',
-        components: {
-            header: Header2,
-            default: About,
-        }
-    },
+        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
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
deleted file mode 100644
index 89057b2..0000000
--- a/src/views/AboutView.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <h3>这是About</h3>
-</template>
-
-<script>
-export default {
-  updated() {
-    console.log(this.$route.query)
-    console.log(this.$route.params)
-  }
-}
-</script>
diff --git a/src/components/Header2.vue b/src/views/Home/Home.vue
similarity index 67%
rename from src/components/Header2.vue
rename to src/views/Home/Home.vue
index caeedb0..e577f64 100644
--- a/src/components/Header2.vue
+++ b/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>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
deleted file mode 100644
index 8af0b4b..0000000
--- a/src/views/HomeView.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <h3>这是Home</h3>
-</template>
diff --git a/src/views/User/UserIndex.vue b/src/views/User/UserIndex.vue
new file mode 100644
index 0000000..0f4363a
--- /dev/null
+++ b/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>