完成一个页面多个路由组件的学习

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>

demo/router-components/components/Header1.vue

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

demo/router-components/components/Header2.vue

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

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')

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

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>

demo/router-components/views/HomeView.vue

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

src/App.vue

@@ -2,26 +2,11 @@
   <nav>
     <router-link to="/"><span>Home</span></router-link>
     |
-    <!--  v-bind绑定path参数  -->
+    <router-link :to="{name:'about'}"><span>About</span></router-link>
-    <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>
   </nav>
+  <router-view name="header"/>
   <router-view/>
 </template>
 <script setup>
-import HeaderView from "@/views/HeaderView.vue";
+
 </script>

src/components/Header1.vue

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

src/components/Header2.vue

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

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 Home = ()=>import('../views/HomeView.vue')
-const Test = () => import('../views/TestView.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')
+        components: {
-    },
+            header: Header2,
-    // 配合params参数的路由path改造
+            default: About,
-    {
-        path: '/about/:id/:name',
-        name: 'about-params',
-        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-    },
-    {
-        path: '/header',
-        name: 'header',
-        component: Header,
-    },
-    {
-        path: '/test',
-        name: 'test',
-        component: Test,
         }
+    },
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes

src/views/HeaderView.vue

@@ -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>

src/views/TestView.vue

@@ -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>