From c5b2de57e30a0a6a02c53527c6c60a789055d983 Mon Sep 17 00:00:00 2001
From: RogerWork <roger.x.sun@qq.com>
Date: Tue, 19 Sep 2023 10:29:38 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E7=9A=84=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/App.vue                               |  0
 .../src/main.js                               |  0
 demo/{component-1.html => component.html}     |  0
 demo/router-roue/App.vue                      | 27 +++++++++++
 demo/router-roue/main.js                      |  5 ++
 demo/router-roue/router/index.js              | 47 +++++++++++++++++++
 demo/router-roue/views/AboutView.vue          | 12 +++++
 demo/router-roue/views/HeaderView.vue         | 18 +++++++
 demo/router-roue/views/HomeView.vue           |  3 ++
 demo/router-roue/views/TestView.vue           | 43 +++++++++++++++++
 src/App.vue                                   | 22 ++++++++-
 src/router/index.js                           | 45 +++++++++++++-----
 src/views/AboutView.vue                       |  9 ++++
 src/views/HeaderView.vue                      | 18 +++++++
 src/views/TestView.vue                        | 43 +++++++++++++++++
 15 files changed, 278 insertions(+), 14 deletions(-)
 rename demo/{component-2 => component-basic}/src/App.vue (100%)
 rename demo/{component-2 => component-basic}/src/main.js (100%)
 rename demo/{component-1.html => component.html} (100%)
 create mode 100644 demo/router-roue/App.vue
 create mode 100644 demo/router-roue/main.js
 create mode 100644 demo/router-roue/router/index.js
 create mode 100644 demo/router-roue/views/AboutView.vue
 create mode 100644 demo/router-roue/views/HeaderView.vue
 create mode 100644 demo/router-roue/views/HomeView.vue
 create mode 100644 demo/router-roue/views/TestView.vue
 create mode 100644 src/views/HeaderView.vue
 create mode 100644 src/views/TestView.vue

diff --git a/demo/component-2/src/App.vue b/demo/component-basic/src/App.vue
similarity index 100%
rename from demo/component-2/src/App.vue
rename to demo/component-basic/src/App.vue
diff --git a/demo/component-2/src/main.js b/demo/component-basic/src/main.js
similarity index 100%
rename from demo/component-2/src/main.js
rename to demo/component-basic/src/main.js
diff --git a/demo/component-1.html b/demo/component.html
similarity index 100%
rename from demo/component-1.html
rename to demo/component.html
diff --git a/demo/router-roue/App.vue b/demo/router-roue/App.vue
new file mode 100644
index 0000000..0af406b
--- /dev/null
+++ b/demo/router-roue/App.vue
@@ -0,0 +1,27 @@
+<template>
+  <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>
+  </nav>
+  <router-view/>
+</template>
+<script setup>
+import HeaderView from "@/views/HeaderView.vue";
+</script>
diff --git a/demo/router-roue/main.js b/demo/router-roue/main.js
new file mode 100644
index 0000000..ff25769
--- /dev/null
+++ b/demo/router-roue/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-roue/router/index.js b/demo/router-roue/router/index.js
new file mode 100644
index 0000000..d26718e
--- /dev/null
+++ b/demo/router-roue/router/index.js
@@ -0,0 +1,47 @@
+// 引入必要的router组件
+import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
+// 引入视图
+import HomeView from '../views/HomeView.vue'
+
+const Header = () => import('../views/HeaderView.vue')
+const Test = () => import('../views/TestView.vue')
+
+// 创建路由，包含path，name，component属性， component属性可以使用箭头函数直接引入视图
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        component: HomeView
+    },
+    {
+        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')
+    },
+    {
+        path: '/header',
+        name: 'header',
+        component: Header,
+    },
+    {
+        path: '/test',
+        name: 'test',
+        component: Test,
+    }
+]
+
+// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
+// 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+// 导出路由
+export default router
diff --git a/demo/router-roue/views/AboutView.vue b/demo/router-roue/views/AboutView.vue
new file mode 100644
index 0000000..89057b2
--- /dev/null
+++ b/demo/router-roue/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-roue/views/HeaderView.vue b/demo/router-roue/views/HeaderView.vue
new file mode 100644
index 0000000..a4e983c
--- /dev/null
+++ b/demo/router-roue/views/HeaderView.vue
@@ -0,0 +1,18 @@
+<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/demo/router-roue/views/HomeView.vue b/demo/router-roue/views/HomeView.vue
new file mode 100644
index 0000000..8af0b4b
--- /dev/null
+++ b/demo/router-roue/views/HomeView.vue
@@ -0,0 +1,3 @@
+<template>
+  <h3>这是Home</h3>
+</template>
diff --git a/demo/router-roue/views/TestView.vue b/demo/router-roue/views/TestView.vue
new file mode 100644
index 0000000..f31e9a5
--- /dev/null
+++ b/demo/router-roue/views/TestView.vue
@@ -0,0 +1,43 @@
+<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>
diff --git a/src/App.vue b/src/App.vue
index ff1c1f3..0af406b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,27 @@
 <template>
   <nav>
-    <router-link to="/"><span>Home</span></router-link> |
+    <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>
   </nav>
   <router-view/>
 </template>
+<script setup>
+import HeaderView from "@/views/HeaderView.vue";
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index 8b8716a..d26718e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,27 +1,46 @@
 // 引入必要的router组件
-import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
 // 引入视图
 import HomeView from '../views/HomeView.vue'
 
+const Header = () => import('../views/HeaderView.vue')
+const Test = () => import('../views/TestView.vue')
+
 // 创建路由，包含path，name，component属性， component属性可以使用箭头函数直接引入视图
 const routes = [
-  {
-    path: '/',
-    name: 'home',
-    component: HomeView
-  },
-  {
-    path: '/about',
-    name: 'about',
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
+    {
+        path: '/',
+        name: 'home',
+        component: HomeView
+    },
+    {
+        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')
+    },
+    {
+        path: '/header',
+        name: 'header',
+        component: Header,
+    },
+    {
+        path: '/test',
+        name: 'test',
+        component: Test,
+    }
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
 // 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
 const router = createRouter({
-  history: createWebHistory(),
-  routes
+    history: createWebHistory(),
+    routes
 })
 
 // 导出路由
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 56b5bc9..89057b2 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,3 +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/src/views/HeaderView.vue b/src/views/HeaderView.vue
new file mode 100644
index 0000000..a4e983c
--- /dev/null
+++ b/src/views/HeaderView.vue
@@ -0,0 +1,18 @@
+<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
new file mode 100644
index 0000000..f31e9a5
--- /dev/null
+++ b/src/views/TestView.vue
@@ -0,0 +1,43 @@
+<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>