diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue
index cda0cab..3d25848 100644
--- a/src/components/common/Header.vue
+++ b/src/components/common/Header.vue
@@ -28,24 +28,18 @@
         </div>
       </div>
     </div>
-    <div class="mainNav" id="mainNav">
-      <div class="box_center cf">
-        <ul class="nav" id="navModule">
-          <li class="on"><a href="/">首页</a></li>
-          <li><a href="/book/bookclass.html">全部作品</a></li>
-          <li><a href="/book/book_ranking.html">排行榜</a></li>
-          <li class=""><a href="/pay/index.html">充值</a></li>
-          <li><a href="/author/index.html" target="_blank">作家专区</a></li>
-        </ul>
-      </div>
-    </div>
+    <Navbar/>
   </div>
 </template>
 
 <script>
 import logo from "@/assets/images/logo.png";
+import Navbar from "@/components/common/Navbar"
 export default {
   name: "Header",
+  components:{
+    Navbar
+  },
   setup() {
     return {
       logo
diff --git a/src/components/common/Navbar.vue b/src/components/common/Navbar.vue
new file mode 100644
index 0000000..e974a01
--- /dev/null
+++ b/src/components/common/Navbar.vue
@@ -0,0 +1,19 @@
+ <template>
+  <div class="mainNav" id="mainNav">
+    <div class="box_center cf">
+      <ul class="nav" id="navModule">
+        <li class="on"><a href="/">首页</a></li>
+        <li><a href="/book/bookclass.html">全部作品</a></li>
+        <li><a href="/book/book_ranking.html">排行榜</a></li>
+        <li class=""><a href="/pay/index.html">充值</a></li>
+        <li><a href="/author/index.html" target="_blank">作家专区</a></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Navbar"
+};
+</script>
\ No newline at end of file