vue router 安装与配置

添加登录和404路由测试

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",

src/App.vue

@@ -3,8 +3,7 @@
 </script>
 
 <template>
-  <h1>MSL平台</h1>
+  <router-view></router-view>
-
 </template>
 
 <style scoped>

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

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

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>

src/views/login/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <h1>我是登录组件</h1>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>