From 3c336e67c50613175abc7b371b2cbebbdebb7aa6 Mon Sep 17 00:00:00 2001
From: RogerWork <roger.x.sun@qq.com>
Date: Tue, 19 Sep 2023 15:22:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=B8=80=E4=B8=AA=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=A4=9A=E4=B8=AA=E8=B7=AF=E7=94=B1=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=9A=84=E5=AD=A6=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/router-components/App.vue                | 12 ++++++
 demo/router-components/components/Header1.vue | 13 ++++++
 demo/router-components/components/Header2.vue | 13 ++++++
 demo/router-components/main.js                |  5 +++
 demo/router-components/router/index.js        | 39 +++++++++++++++++
 demo/router-components/views/AboutView.vue    | 12 ++++++
 demo/router-components/views/HomeView.vue     |  3 ++
 src/App.vue                                   | 21 ++-------
 src/components/Header1.vue                    | 13 ++++++
 src/components/Header2.vue                    | 13 ++++++
 src/router/index.js                           | 38 +++++++---------
 src/views/HeaderView.vue                      | 18 --------
 src/views/TestView.vue                        | 43 -------------------
 13 files changed, 141 insertions(+), 102 deletions(-)
 create mode 100644 demo/router-components/App.vue
 create mode 100644 demo/router-components/components/Header1.vue
 create mode 100644 demo/router-components/components/Header2.vue
 create mode 100644 demo/router-components/main.js
 create mode 100644 demo/router-components/router/index.js
 create mode 100644 demo/router-components/views/AboutView.vue
 create mode 100644 demo/router-components/views/HomeView.vue
 create mode 100644 src/components/Header1.vue
 create mode 100644 src/components/Header2.vue
 delete mode 100644 src/views/HeaderView.vue
 delete mode 100644 src/views/TestView.vue

diff --git a/demo/router-components/App.vue b/demo/router-components/App.vue
new file mode 100644
index 0000000..7cdf6f4
--- /dev/null
+++ b/demo/router-components/App.vue
@@ -0,0 +1,12 @@
+<template>
+  <nav>
+    <router-link to="/"><span>Home</span></router-link>
+    |
+    <router-link :to="{name:'about'}"><span>About</span></router-link>
+  </nav>
+  <router-view name="header"/>
+  <router-view/>
+</template>
+<script setup>
+
+</script>
diff --git a/demo/router-components/components/Header1.vue b/demo/router-components/components/Header1.vue
new file mode 100644
index 0000000..ba80fcf
--- /dev/null
+++ b/demo/router-components/components/Header1.vue
@@ -0,0 +1,13 @@
+<template>
+  <h3>这是Header1</h3>
+</template>
+
+<script>
+export default {
+  name: "Header1"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/demo/router-components/components/Header2.vue b/demo/router-components/components/Header2.vue
new file mode 100644
index 0000000..caeedb0
--- /dev/null
+++ b/demo/router-components/components/Header2.vue
@@ -0,0 +1,13 @@
+<template>
+  <h3>这是Header2</h3>
+</template>
+
+<script>
+export default {
+  name: "Header2"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/demo/router-components/main.js b/demo/router-components/main.js
new file mode 100644
index 0000000..ff25769
--- /dev/null
+++ b/demo/router-components/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-components/router/index.js b/demo/router-components/router/index.js
new file mode 100644
index 0000000..0d1e9ca
--- /dev/null
+++ b/demo/router-components/router/index.js
@@ -0,0 +1,39 @@
+// 引入必要的router组件
+import {createRouter, createWebHistory} from 'vue-router'
+// 引入视图
+
+const Home = ()=>import('../views/HomeView.vue')
+const About = () => import('../views/AboutView.vue')
+const Header1 = () => import('../components/Header1.vue')
+const Header2 = () => import('../components/Header2.vue')
+
+
+// 创建路由，如果同一个路由中包含多个组件，则将component改名为components（加s），已对像的形式加添加多个组件，对象中的key是对象的名称， 可以在视图中使用此名称指定组件
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        components: {
+            header: Header1,
+            default: Home,
+        }
+    },
+    {
+        path: '/about',
+        name: 'about',
+        components: {
+            header: Header2,
+            default: About,
+        }
+    },
+]
+
+// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
+// 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+// 导出路由
+export default router
diff --git a/demo/router-components/views/AboutView.vue b/demo/router-components/views/AboutView.vue
new file mode 100644
index 0000000..89057b2
--- /dev/null
+++ b/demo/router-components/views/AboutView.vue
@@ -0,0 +1,12 @@
+<template>
+  <h3>这是About</h3>
+</template>
+
+<script>
+export default {
+  updated() {
+    console.log(this.$route.query)
+    console.log(this.$route.params)
+  }
+}
+</script>
diff --git a/demo/router-components/views/HomeView.vue b/demo/router-components/views/HomeView.vue
new file mode 100644
index 0000000..8af0b4b
--- /dev/null
+++ b/demo/router-components/views/HomeView.vue
@@ -0,0 +1,3 @@
+<template>
+  <h3>这是Home</h3>
+</template>
diff --git a/src/App.vue b/src/App.vue
index 0af406b..7cdf6f4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,26 +2,11 @@
   <nav>
     <router-link to="/"><span>Home</span></router-link>
     |
-    <!--  v-bind绑定path参数  -->
-    <router-link :to="{path:'/'}"><span>Home-path</span></router-link>
-    |
-    <!--  v-bind绑定name参数对应路由定义中的name  -->
-    <router-link :to="{name:'home'}"><span>Home-name</span></router-link>
-    |
-    <router-link to="/about"><span>About</span></router-link>
-    |
-    <!--  带query参数，url地址格式： http://localhost:8080/about?id=1  -->
-    <router-link :to="{path:'/about', query:{id:1}}"><span>About-query</span></router-link>
-    |
-    <!--  带params参数，url地址格式： http://localhost:8080/about/1/roger  -->
-    <router-link :to="{name:'about-params', params:{id:'1',name:'roger'}}"><span>About-params</span></router-link>
-    |
-    <router-link to="/header"><span>Header-组合API</span></router-link>
-    |
-    <router-link :to="{name:'test'}"><span>Test-选项API</span></router-link>
+    <router-link :to="{name:'about'}"><span>About</span></router-link>
   </nav>
+  <router-view name="header"/>
   <router-view/>
 </template>
 <script setup>
-import HeaderView from "@/views/HeaderView.vue";
+
 </script>
diff --git a/src/components/Header1.vue b/src/components/Header1.vue
new file mode 100644
index 0000000..ba80fcf
--- /dev/null
+++ b/src/components/Header1.vue
@@ -0,0 +1,13 @@
+<template>
+  <h3>这是Header1</h3>
+</template>
+
+<script>
+export default {
+  name: "Header1"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Header2.vue b/src/components/Header2.vue
new file mode 100644
index 0000000..caeedb0
--- /dev/null
+++ b/src/components/Header2.vue
@@ -0,0 +1,13 @@
+<template>
+  <h3>这是Header2</h3>
+</template>
+
+<script>
+export default {
+  name: "Header2"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index d26718e..0d1e9ca 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,39 +1,31 @@
 // 引入必要的router组件
-import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
+import {createRouter, createWebHistory} from 'vue-router'
 // 引入视图
-import HomeView from '../views/HomeView.vue'
 
-const Header = () => import('../views/HeaderView.vue')
-const Test = () => import('../views/TestView.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')
 
-// 创建路由，包含path，name，component属性， component属性可以使用箭头函数直接引入视图
+
+// 创建路由，如果同一个路由中包含多个组件，则将component改名为components（加s），已对像的形式加添加多个组件，对象中的key是对象的名称， 可以在视图中使用此名称指定组件
 const routes = [
     {
         path: '/',
         name: 'home',
-        component: HomeView
+        components: {
+            header: Header1,
+            default: Home,
+        }
     },
     {
         path: '/about',
         name: 'about',
-        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-    },
-    // 配合params参数的路由path改造
-    {
-        path: '/about/:id/:name',
-        name: 'about-params',
-        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+        components: {
+            header: Header2,
+            default: About,
+        }
     },
-    {
-        path: '/header',
-        name: 'header',
-        component: Header,
-    },
-    {
-        path: '/test',
-        name: 'test',
-        component: Test,
-    }
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
diff --git a/src/views/HeaderView.vue b/src/views/HeaderView.vue
deleted file mode 100644
index a4e983c..0000000
--- a/src/views/HeaderView.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <h3>这是Header</h3>
-  <button @click="GoHome">GoHome</button>
-</template>
-
-<script setup>
-import {useRoute, useRouter} from "vue-router";
-
-const route = useRoute()
-const router = useRouter()
-
-function GoHome() {
-    router.push({
-      name: 'home',
-      query: {...route.query}
-    })
-  }
-</script>
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
deleted file mode 100644
index f31e9a5..0000000
--- a/src/views/TestView.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <h3>这事Test</h3>
-  <button @click="goAboutParams">GotoAbout</button>
-</template>
-
-<script>
-export default {
-  name: "TestView",
-  methods: {
-    // 字符串路径
-    goAbout: function () {
-      this.$router.push('/about')
-    },
-    //对象形式的path
-    goAboutPath: function () {
-      this.$router.push({path: '/about'})
-    },
-    // 带params的push请求
-    goAboutParams: function () {
-      this.$router.push({
-        name: 'about-params',
-        params: {
-          id: 1,
-          name: 'roger'
-        }
-      })
-    },
-    // 带参数的router.push
-    goAboutQuery: function () {
-      this.$router.push({
-        name: 'about',
-        // query: {...this.$route.query}  // 映射query
-        query: {id: 1}
-      })
-    }
-  }
-}
-</script>
-
-
-<style scoped>
-
-</style>