diff --git a/web/package-lock.json b/web/package-lock.json
index 53a6eb9..8947b3b 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,6 +8,7 @@
       "name": "web",
       "version": "0.1.0",
       "dependencies": {
+        "@popperjs/core": "^2.11.5",
         "bootstrap": "^5.2.0",
         "core-js": "^3.8.3",
         "jquery": "^3.6.0",
@@ -1936,6 +1937,11 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
@@ -12232,6 +12238,11 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
diff --git a/web/package.json b/web/package.json
index 84957c3..4202131 100644
--- a/web/package.json
+++ b/web/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.5",
     "bootstrap": "^5.2.0",
     "core-js": "^3.8.3",
     "jquery": "^3.6.0",
diff --git a/web/src/App.vue b/web/src/App.vue
index 052988c..c6b7f10 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,34 +1,38 @@
 <template>
-<div>
-  <div>Bot昵称：{{bot_name}}</div>
-  <div>Bot战力：{{bot_rating}}</div>
-</div>
+  <NavBar/>
 <router-view/>
 </template>
 
 
 <script>
-import $ from "jquery"
-import { ref } from "vue"
+// import $ from "jquery"
+// import { ref } from "vue"
+import  NavBar  from './components/NavBar.vue';
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/js/bootstrap.min.js";
+// import "bootstrap/dist/js/bootstrap";
+
+
 export default {
+  components: { NavBar },
   name:"app",
-  setup:()=>{
-    let bot_name = ref("");
-    let bot_rating = ref("");
-    $.ajax({
-      url:"http://localhost:3000/pk/getbotinfo/",
-      type:"get",
-      success:resp=>{
-        console.log(resp);
-        bot_name.value = resp.name;
-        bot_rating.value = resp.rating;
-      }
-    });
-    return {
-      bot_name,
-      bot_rating
-    }
-  }
+  // setup:()=>{
+  //   let bot_name = ref("");
+  //   let bot_rating = ref("");
+  //   $.ajax({
+  //     url:"http://localhost:3000/pk/getbotinfo/",
+  //     type:"get",
+  //     success:resp=>{
+  //       console.log(resp);
+  //       bot_name.value = resp.name;
+  //       bot_rating.value = resp.rating;
+  //     }
+  //   });
+  //   return {
+  //     bot_name,
+  //     bot_rating
+  //   }
+  // }
 }
 </script>
 
diff --git a/web/src/components/ContentField.vue b/web/src/components/ContentField.vue
new file mode 100644
index 0000000..1e446ec
--- /dev/null
+++ b/web/src/components/ContentField.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="container content-field">
+        <div class="card">
+            <div class="card-body">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+div.content-field {
+    margin-top: 20px ;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
new file mode 100644
index 0000000..1dd0b8a
--- /dev/null
+++ b/web/src/components/NavBar.vue
@@ -0,0 +1,73 @@
+<template>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <div class="container">
+    <router-link class='navbar-brand'  :to="{name:'home'}">King Of Bots</router-link>
+    <!-- <a class="navbar-brand" href="#">King Of Bots</a> -->
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarText">
+     
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item">
+          <!-- <a class="nav-link active" aria-current="page" href="/pk/">对战</a> -->
+          <!-- router-link单页面 -->
+
+          <router-link :class="route_name == 'pk_index' ? 'nav-link active' : 'nav-link' " :to="{name:'pk_index'}">PK</router-link>
+        </li>
+        <li class="nav-item">
+          <!-- <a class="nav-link" href="/record/">对局列表</a> -->
+          <router-link :class="route_name == 'record_index' ? 'nav-link active' : 'nav-link' " :to="{name:'record_index'}">对局列表</router-link>
+        </li>
+        <li class="nav-item">
+          <!-- <a class="nav-link" href="/ranklist/">排行榜</a> -->
+          <router-link :class="route_name == 'ranklist_index' ? 'nav-link active' : 'nav-link' " :to="{name:'ranklist_index'}">排行榜</router-link>
+        </li>
+      </ul>
+
+      <ul class="navbar-nav">
+        <li class="nav-item dropdown">
+            
+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            杜艳贺
+            </a>
+
+            <!-- --------坑：注意----------------- -->
+            <!-- 下拉框的警告解决：style="margin:0" -->
+            <!-- -------------------------------- -->
+            <ul class="dropdown-menu" aria-labelledby="navbarDropdown"  style="margin:0">
+                <router-link class="dropdown-item" :to="{name:'user_bot_index'}">我的Bots</router-link>                
+                <li><hr class="dropdown-divider"></li>
+                <li><a class="dropdown-item" href="#">退出</a></li>
+            </ul>
+        </li>
+      </ul>
+    
+    
+    </div>
+  </div>
+</nav>
+</template>
+
+<script>
+//坑：注意 {}
+import { useRoute } from "vue-router";
+import { computed } from "vue";
+
+export default {
+
+    //不太理解
+    setup(){
+        const route = useRoute();
+        let route_name = computed( () => route.name );
+        return {
+            route_name
+        }
+    }
+
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/web/src/router/index.js b/web/src/router/index.js
index e9e42ee..a304821 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -1,6 +1,53 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import NotFound from '../views/error/NotFound'
+import PkIndexView from '../views/pk/PkIndexView'
+import RanklistIndexView from '../views/ranklist/RanklistIndexView'
+import RecordIndexView from '../views/record/RecordIndexView'
+import UserBotIndexView from '../views/user/bot/UserBotIndexView'
 
 const routes = [
+  {
+    path: "/",
+    name:"home",
+    redirect:"/pk/",
+  },
+  //pk
+  {
+    path:"/pk/",
+    name:"pk_index",
+    component:PkIndexView,
+  },
+  //对战列表
+  {
+    path:"/record/",
+    name:"record_index",
+    component:RecordIndexView,
+  },
+  //排行榜
+  {
+    path:"/ranklist/",
+    name:"ranklist_index",
+    component:RanklistIndexView,
+  },
+  //我的Bot
+  {
+    path:"/user/bot/",
+    name:"user_bot_index",
+    component:UserBotIndexView,
+  },
+  //404页面
+  {
+    path:"/404/",
+    name:"404",
+    component:NotFound,
+  },
+  //匹配其他未路由的页面
+  {
+    path:"/:catChAll(.*)",
+    redirect:"/404/",
+  }
+
+
 ]
 
 const router = createRouter({
diff --git a/web/src/views/error/NotFound.vue b/web/src/views/error/NotFound.vue
new file mode 100644
index 0000000..e770425
--- /dev/null
+++ b/web/src/views/error/NotFound.vue
@@ -0,0 +1,19 @@
+<template>
+    <ContentField>
+        404
+    </ContentField>
+</template>
+
+<script>
+import ContentField from "@/components/ContentField"
+
+export default {
+    components:{
+        ContentField
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/web/src/views/pk/PkIndexView.vue b/web/src/views/pk/PkIndexView.vue
new file mode 100644
index 0000000..21bd895
--- /dev/null
+++ b/web/src/views/pk/PkIndexView.vue
@@ -0,0 +1,20 @@
+<template>
+    <ContentField>
+        PK卡槽
+    </ContentField>
+</template>
+
+<script>
+import ContentField from "@/components/ContentField"
+
+export default {
+    components:{
+        ContentField
+    }
+}
+</script>
+
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/web/src/views/ranklist/RanklistIndexView.vue b/web/src/views/ranklist/RanklistIndexView.vue
new file mode 100644
index 0000000..15b2d0a
--- /dev/null
+++ b/web/src/views/ranklist/RanklistIndexView.vue
@@ -0,0 +1,19 @@
+<template>
+      <ContentField>
+        排行榜卡槽
+    </ContentField>
+</template>
+
+<script>
+import ContentField from "@/components/ContentField"
+
+export default {
+    components:{
+        ContentField
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/web/src/views/record/RecordIndexView.vue b/web/src/views/record/RecordIndexView.vue
new file mode 100644
index 0000000..716abcd
--- /dev/null
+++ b/web/src/views/record/RecordIndexView.vue
@@ -0,0 +1,19 @@
+<template>
+    <ContentField>
+        对局列表卡槽
+    </ContentField>
+</template>
+
+<script>
+import ContentField from "@/components/ContentField"
+
+export default {
+    components:{
+        ContentField
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/web/src/views/user/bot/UserBotIndexView.vue b/web/src/views/user/bot/UserBotIndexView.vue
new file mode 100644
index 0000000..fdd547a
--- /dev/null
+++ b/web/src/views/user/bot/UserBotIndexView.vue
@@ -0,0 +1,19 @@
+<template>
+    <ContentField>
+        我的Bots
+    </ContentField>
+</template>
+
+<script>
+import ContentField from "@/components/ContentField"
+
+export default {
+    components:{
+        ContentField
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file