diff --git a/backend/src/main/java/com/kob/backend/config/CorsConfig.java b/backend/src/main/java/com/kob/backend/config/CorsConfig.java
new file mode 100644
index 0000000..c06a711
--- /dev/null
+++ b/backend/src/main/java/com/kob/backend/config/CorsConfig.java
@@ -0,0 +1,44 @@
+package com.kob.backend.config;
+
+import org.springframework.context.annotation.Configuration;
+
+import javax.servlet.*;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
+
+// 这个类用于解决CORS跨域问题
+@Configuration
+public class CorsConfig implements Filter {
+    @Override
+    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
+        HttpServletResponse response = (HttpServletResponse) res;
+        HttpServletRequest request = (HttpServletRequest) req;
+
+        String origin = request.getHeader("Origin");
+        if (origin != null) {
+            response.setHeader("Access-Control-Allow-Origin", origin);
+        }
+
+        String headers = request.getHeader("Access-Control-Request-Headers");
+        if (headers != null) {
+            response.setHeader("Access-Control-Allow-Headers", headers);
+            response.setHeader("Access-Control-Expose-Headers", headers);
+        }
+
+        response.setHeader("Access-Control-Allow-Methods", "*");
+        response.setHeader("Access-Control-Max-Age", "3600");
+        response.setHeader("Access-Control-Allow-Credentials", "true");
+
+        chain.doFilter(request, response);
+    }
+
+    @Override
+    public void init(FilterConfig filterConfig) {
+
+    }
+
+    @Override
+    public void destroy() {
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/kob/backend/controller/pk/BotinfoController.java b/backend/src/main/java/com/kob/backend/controller/pk/BotinfoController.java
index 51239a0..e452875 100644
--- a/backend/src/main/java/com/kob/backend/controller/pk/BotinfoController.java
+++ b/backend/src/main/java/com/kob/backend/controller/pk/BotinfoController.java
@@ -13,16 +13,10 @@ import java.util.Map;
 public class BotinfoController {
 
     @RequestMapping("getbotinfo/")
-    public List<Map<String, String>> getBotInfo() {
-        List<Map<String, String>> list = new LinkedList<>();
+    public Map<String, String> getBotInfo() {
         Map<String, String> bot1 = new HashMap<>();
         bot1.put("name", "tiger");
         bot1.put("rating", "1500");
-        Map<String, String> bot2 = new HashMap<>();
-        bot2.put("name", "apple");
-        bot2.put("rating", "1800");
-        list.add(bot1);
-        list.add(bot2);
-        return list;
+        return bot1;
     }
 }
diff --git a/web/package-lock.json b/web/package-lock.json
index a054881..7a0f7e2 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -12,6 +12,7 @@
         "core-js": "^3.8.3",
         "jquery": "^3.6.3",
         "vue": "^3.2.13",
+        "vue-router": "^4.0.3",
         "vuex": "^4.0.0"
       },
       "devDependencies": {
@@ -10274,6 +10275,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",
+      "integrity": "sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.4.5"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
diff --git a/web/package.json b/web/package.json
index 004fb73..59684d2 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,6 +12,7 @@
     "core-js": "^3.8.3",
     "jquery": "^3.6.3",
     "vue": "^3.2.13",
+    "vue-router": "^4.0.3",
     "vuex": "^4.0.0"
   },
   "devDependencies": {
diff --git a/web/src/App.vue b/web/src/App.vue
index 591a031..a753dba 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,19 +1,11 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <nav>
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+  </nav>
+  <router-view/>
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -21,6 +13,18 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+}
+
+nav {
+  padding: 30px;
+}
+
+nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+nav a.router-link-exact-active {
+  color: #42b983;
 }
 </style>
diff --git a/web/src/main.js b/web/src/main.js
index 452f11a..a92f228 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 import store from './store'
 
-createApp(App).use(store).use(store).mount('#app')
+createApp(App).use(store).use(router).mount('#app')
diff --git a/web/src/router/index.js b/web/src/router/index.js
new file mode 100644
index 0000000..d7a8d0a
--- /dev/null
+++ b/web/src/router/index.js
@@ -0,0 +1,25 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView
+  },
+  {
+    path: '/about',
+    name: 'about',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+export default router
diff --git a/web/src/views/AboutView.vue b/web/src/views/AboutView.vue
new file mode 100644
index 0000000..3fa2807
--- /dev/null
+++ b/web/src/views/AboutView.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
new file mode 100644
index 0000000..e8d96d7
--- /dev/null
+++ b/web/src/views/HomeView.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'HomeView',
+  components: {
+    HelloWorld
+  }
+}
+</script>