feat:前端项目安装vue-router,并配置路由对应的组件

ui/yangyi-open-api-platform-ui/package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "element-plus": "^2.11.4",
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "vue-router": "^4.6.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.1",
@@ -937,6 +938,11 @@
         "@vue/shared": "3.5.22"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.22",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.22.tgz",
@@ -1940,6 +1946,20 @@
         }
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.6.0.tgz",
+      "integrity": "sha512-YRrWLi4ayHe1d6zyH6sMPwF/WwcDY8XgUOfQGa0Kx4kmugSorLavD1ExrM/Y83B4X2NQMXYpJFSq2pbZh9ildQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",

ui/yangyi-open-api-platform-ui/package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "element-plus": "^2.11.4",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-router": "^4.6.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",

ui/yangyi-open-api-platform-ui/src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
+import router from './router/index.js'
 import 'element-plus/dist/index.css'
 import './style.css'
 import App from './App.vue'
@@ -7,4 +8,5 @@ import App from './App.vue'
 const app = createApp(App)
 
 app.use(ElementPlus)
+app.use(router)
 app.mount('#app')

ui/yangyi-open-api-platform-ui/src/router/index.js

@@ -0,0 +1,30 @@
+
+// 引入需要的模块
+import { createRouter,  createWebHistory } from 'vue-router'
+
+// 下面使用了es6的对象增强写法，命名必须是routes
+const routes = [
+    {
+        path: '/',
+        redirect: '/home'
+    },
+    // {
+    //     path: '/login',
+    //     // 已经配置了路径别名，@/view 就可以写成 view
+    //     // 配置了extensions，login.vue可以写成login
+    //     component: () => import('@/views/login')
+    // },
+    {
+        path: '/home',
+        component: () => import('/src/components/HelloWorld.vue')
+    }
+]
+
+// 创建路由
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+// 导出路由
+export default router