路由的定义瑟使用

package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "axios": "^1.8.4",
     "element-plus": "^2.9.8",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.2",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       vue:
         specifier: ^3.5.13
         version: 3.5.13
+      vue-router:
+        specifier: ^4.5.0
+        version: 4.5.0(vue@3.5.13)
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^5.2.2
@@ -363,6 +366,9 @@ packages:
   '@vue/compiler-ssr@3.5.13':
     resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
 
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
   '@vue/reactivity@3.5.13':
     resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
 
@@ -630,6 +636,11 @@ packages:
       '@vue/composition-api':
         optional: true
 
+  vue-router@4.5.0:
+    resolution: {integrity: sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==}
+    peerDependencies:
+      vue: ^3.2.0
+
   vue@3.5.13:
     resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
     peerDependencies:
@@ -854,6 +865,8 @@ snapshots:
       '@vue/compiler-dom': 3.5.13
       '@vue/shared': 3.5.13
 
+  '@vue/devtools-api@6.6.4': {}
+
   '@vue/reactivity@3.5.13':
     dependencies:
       '@vue/shared': 3.5.13
@@ -1138,6 +1151,11 @@ snapshots:
     dependencies:
       vue: 3.5.13
 
+  vue-router@4.5.0(vue@3.5.13):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.13
+
   vue@3.5.13:
     dependencies:
       '@vue/compiler-dom': 3.5.13

src/App.vue

@@ -1,44 +1,3 @@
-<script setup>
-import request from './api/request.js'
-import HelloWorld from './components/HelloWorld.vue'
-
-const fetchData = async()=>{
-  try {
-    const response=await request.get('/wechat/token')
-    console.log(response)
-  } catch (error) {
-    console.error(error)
-  }
-}
-</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" />
-
-  <div>
-    <el-button @click="fetchData" type="primary">main</el-button>
-  </div>
+  <router-view />
 </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>

src/api/request.js

@@ -27,15 +27,14 @@ service.interceptors.response.use(
     response => {
         const res = response.data;
         // 假设统一应答数据结构中有一个 code 字段表示请求状态
-        if (res.code !== 0) {
-            console.log('请求失败:', res.message);
-            return Promise.reject(new Error(res.message || 'Error'));
+        if (res.code !== 2) {
+            console.log('请求失败:', res);
+            return Promise.reject(new Error(res.msg || 'Error'));
         } else {
             return res.data;
         }
     },
     error => {
-        console.log('请求出错:', error.message);
         return Promise.reject(error);
     }
 );

src/main.js

@@ -3,10 +3,12 @@ import './style.css'
 import App from './App.vue'
 import axios from 'axios'
 import ElementPlus from 'element-plus'
+import router from './router'
 import 'element-plus/dist/index.css'
 
 const app=createApp(App)
 
+app.use(router)
 app.use(ElementPlus)
 app.config.globalProperties.$axios=axios
 

src/router/index.js

@@ -0,0 +1,22 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: ()=> import("../views/home.vue"),
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: ()=> import("../views/about.vue"),
+  }
+];
+
+const router = createRouter({
+  //history: createWebHashHistory(), http://localhost/#about
+  history: createWebHistory(), //http://localhost/about
+  routes
+});
+
+export default router;

src/views/about.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <p>hello about</p>
+    </div>
+</template>

src/views/home.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <p>hello home</p>
+        <el-alert
+        v-if="showAlert"
+        :title="alertTitle"
+        :type="alertType"
+        :description="alertDescription"
+        show-icon
+        />
+        <div>
+            <el-button @click="fetchData" type="primary">main</el-button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import request from '../api/request.js'
+
+// 定义用于控制 el-alert 显示的变量
+const showAlert = ref(false);
+const alertTitle = ref('');
+const alertType = ref('warning');
+const alertDescription = ref('');
+
+const fetchData = async()=>{
+  try {
+    const response=await request.get('/wechat/token')
+    console.log(response)
+  } catch (error) {
+    alertTitle.value = 'Error';
+    alertDescription.value = error.message;
+    showAlert.value = true;
+  }
+}
+</script>