From 6df44e6aafa25f26883e9b9ead5d5ee7f5acbc56 Mon Sep 17 00:00:00 2001
From: huangge1199 <huangge1199@hotmail.com>
Date: Thu, 28 Nov 2024 09:20:42 +0800
Subject: [PATCH] =?UTF-8?q?vue=20router=20=E5=AE=89=E8=A3=85=E4=B8=8E?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=20=E6=B7=BB=E5=8A=A0=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E5=92=8C404=E8=B7=AF=E7=94=B1=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json              |  3 ++-
 src/App.vue               |  3 +--
 src/main.ts               |  2 ++
 src/router/index.ts       | 20 ++++++++++++++++++++
 src/views/error/404.vue   | 15 +++++++++++++++
 src/views/login/index.vue | 11 +++++++++++
 6 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 src/router/index.ts
 create mode 100644 src/views/error/404.vue
 create mode 100644 src/views/login/index.vue

diff --git a/package.json b/package.json
index 6b17dee..44aafc1 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.8.8",
-    "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 10d2a8c..b36583f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,8 +3,7 @@
 </script>
 
 <template>
-  <h1>MSL平台</h1>
-
+  <router-view></router-view>
 </template>
 
 <style scoped>
diff --git a/src/main.ts b/src/main.ts
index 84b7689..08355c5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import App from './App.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import router from './router'
 
 const app = createApp(App)
 
@@ -10,4 +11,5 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)){
     app.component(key, component)
 }
 app.use(ElementPlus)
+app.use(router)
 app.mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..26d2878
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,20 @@
+import { RouteRecordRaw, Router, createRouter, createWebHistory } from "vue-router"
+
+const routes: RouteRecordRaw[] = [
+    {
+        path: '/login',
+        name: 'Login',
+        component: ()=>import('../views/login/index.vue')
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        name: '404',
+        component: ()=>import('../views/error/404.vue')
+    },
+]
+const router: Router = createRouter({
+    routes: routes,
+    history: createWebHistory()
+})
+
+export default router
diff --git a/src/views/error/404.vue b/src/views/error/404.vue
new file mode 100644
index 0000000..7a08839
--- /dev/null
+++ b/src/views/error/404.vue
@@ -0,0 +1,15 @@
+<template>
+  <el-result icon="warning" title="404" sub-title="非常抱歉，你访问的页面走丢了~~">
+    <template #extra>
+      <el-button type="primary" @click="$router.push('/')">返回上一页</el-button>
+    </template>
+  </el-result>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000..6fde820
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <h1>我是登录组件</h1>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>