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>