From c95253aafea8edbd5a0f6c1a33b33bf934ada6cf Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Thu, 20 Mar 2025 00:20:57 +0800
Subject: [PATCH] add: vue-router

---
 package-lock.json      | 24 +++++++++++++++++++++++-
 package.json           |  3 ++-
 src/App.vue            | 29 +++--------------------------
 src/main.js            | 12 ++++++++----
 src/router/index.js    | 17 +++++++++++++++++
 src/views/HomeView.vue | 30 ++++++++++++++++++++++++++++++
 6 files changed, 83 insertions(+), 32 deletions(-)
 create mode 100644 src/router/index.js
 create mode 100644 src/views/HomeView.vue

diff --git a/package-lock.json b/package-lock.json
index 24af0ce..864e9ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
       "name": "vue",
       "version": "0.0.0",
       "dependencies": {
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "vue-router": "^4.5.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.1",
@@ -829,6 +830,12 @@
         "@vue/shared": "3.5.13"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.13",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
@@ -1160,6 +1167,21 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vue-router": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
+      "integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index de6425f..6f28ee0 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
diff --git a/src/App.vue b/src/App.vue
index 81c28ec..6a6cd2d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,7 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
+import { RouterView } from 'vue-router';
 </script>
 
 <template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
-</template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+  <RouterView />
+</template>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 2425c0f..f8124bc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,9 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
+import { createApp } from 'vue';
+import './style.css';
+import App from './App.vue';
+import router from './router';
 
-createApp(App).mount('#app')
+const app = createApp(App);
+
+app.use(router);
+app.mount('#app');
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..62dc92f
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+
+const routes = [
+    {
+        path: '/',
+        name: 'Home',
+        component: HomeView
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+export default router;
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
new file mode 100644
index 0000000..379810b
--- /dev/null
+++ b/src/views/HomeView.vue
@@ -0,0 +1,30 @@
+<script setup>
+import HelloWorld from '../components/HelloWorld.vue';
+</script>
+
+<template>
+  <div>
+    <a href="https://vite.dev" target="_blank">
+      <img src="/vite.svg" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://vuejs.org/" target="_blank">
+      <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
+    </a>
+  </div>
+  <HelloWorld msg="Vite + Vue" />
+</template>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>