diff --git a/src/App.vue b/src/App.vue
index b1356fd..90a17f2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,50 @@
+
 <template>
-  <ToolTitle msg="Hello Vue 3.0 + Vite" />
-  <HelloWorld msg="Hello Vue 3.0 + Vite" />
-</template>
+  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
+    <!-- Brand -->
+    <a class="navbar-brand" href="#">梦幻合合合</a>
+
+    <!-- Links -->
+    <ul class="navbar-nav">
+      <!-- Dropdown -->
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
+          服务器选择
+        </a>
+        <div class="dropdown-menu">
+          <a class="dropdown-item" href="#">Link 1</a>
+          <a class="dropdown-item" href="#">Link 2</a>
+          <a class="dropdown-item" href="#">Link 3</a>
+        </div>
+      </li>
 
-<script>
-import ToolTitle from './components/ToolTitle.vue'
-import HelloWorld from './components/HelloWorld.vue'
+      <li class="nav-item">
+        <a class="nav-link" href="#">玩家修改</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">玩家查询</a>
+      </li>
+
+    </ul>
+  </nav>
+
+  <component :is="currentView" />
+</template>
 
-export default {
-  name: 'App',
-  components: {
-    ToolTitle,
-    HelloWorld
-  }
+<script setup>
+import { ref, computed } from 'vue'
+import Home from './components/Home.vue'
+import About from './components/About.vue'
+import NotFound from './components/NotFound.vue'
+const routes = {
+  '/': Home,
+  '/about': About
 }
+const currentPath = ref(window.location.hash)
+window.addEventListener('hashchange', () => {
+  currentPath.value = window.location.hash
+})
+const currentView = computed(() => {
+  return routes[currentPath.value.slice(1) || '/'] || NotFound
+})
 </script>
diff --git a/src/components/About.vue b/src/components/About.vue
new file mode 100644
index 0000000..bdc8aa9
--- /dev/null
+++ b/src/components/About.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>About</h1>
+</template>
\ No newline at end of file
diff --git a/src/components/Home.vue b/src/components/Home.vue
new file mode 100644
index 0000000..62a78c3
--- /dev/null
+++ b/src/components/Home.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>Home</h1>
+</template>
\ No newline at end of file
diff --git a/src/components/NotFound.vue b/src/components/NotFound.vue
new file mode 100644
index 0000000..116a8bc
--- /dev/null
+++ b/src/components/NotFound.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>404</h1>
+</template>
\ No newline at end of file
--
libgit2 0.21.0