diff --git a/src/views/Index.vue b/src/views/Index.vue
index c445b04..e5c8dae 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -2,31 +2,7 @@
     <div class="IndexPage row">
         <!-- left 区域 -->
         <div class="col-1 item item-1">
-            <div class="list-group list-group-flush menu" role="tablist" id="list-tab">
-                <a href="list-home" class="list-group-item list-group-item-action" id="list-home-list" data-toggle="list"
-                    role="tab" aria-controls="home">dashboard</a>
-
-                <a href="list-people" class="list-group-item list-group-item-action" id="list-people-list"
-                    data-toggle="list" role="tab" aria-controls="people">人员管理</a>
-
-                <a href="list-asset" class="list-group-item list-group-item-action" id="list-asset-list" data-toggle="list"
-                    role="tab" aria-controls="asset">资产管理</a>
-
-                <a href="list-vendor" class="list-group-item list-group-item-action" id="list-vendor-list"
-                    data-toggle="list" role="tab" aria-controls="vendor">厂商管理</a>
-
-                <a href="list-claims" class="list-group-item list-group-item-action" id="list-claims-list"
-                    data-toggle="list" role="tab" aria-controls="claims">报销管理</a>
-
-                <a href="list-repair" class="list-group-item list-group-item-action" id="list-repair-list"
-                    data-toggle="list" role="tab" aria-controls="repair">维修管理</a>
-
-                <a href="list-permission" class="list-group-item list-group-item-action" id="list-permission-list"
-                    data-toggle="list" role="tab" aria-controls="permission">权限管理</a>
-
-                <a href="list-export" class="list-group-item list-group-item-action" id="list-export-list"
-                    data-toggle="list" role="tab" aria-controls="export">列表导出</a>
-            </div>
+            <sidebar />
         </div>
 
         <!-- right 区域 -->
@@ -39,11 +15,13 @@
                     <!-- 导航栏 -->
                     <div class="container-fluid row ">
                         <div class="col-1 item">
-                            <a class="navbar-brand">
-                                <img src="https://img.icons8.com/cotton/24/null/money--v2.png"
-                                    class="d-inline-block align-text-top" alt="Logo" />
-                                Bootstrap
-                            </a>
+                            <span>
+                                <a class="navbar-brand">
+                                    <img src="https://img.icons8.com/cotton/24/null/money--v2.png"
+                                        class="d-inline-block align-text-top" alt="Logo" />
+                                    资产系统
+                                </a>
+                            </span>
                         </div>
                         <div class="col-3 item">
                             <form class="d-flex align-items-center" role="search">
@@ -53,6 +31,9 @@
                             </form>
                         </div>
                         <div class="col-1 item" id="userImage">
+                            <div class="set">
+
+                            </div>
                             <img src="../image/user.png" alt="userIMage">
                         </div>
                     </div>
@@ -74,8 +55,11 @@
 </template>
 
 <script >
+import sidebar from './navigations/sidebar.vue';
+
 export default {
     name: 'App5Index',
+    components: { sidebar },
 
     data() {
         return {
@@ -98,7 +82,7 @@ export default {
 .IndexPage {
     height: 100vh;
     padding: 0;
-    background-color: aqua;
+    background-color: white;
     box-sizing: border-box;
 }
 
@@ -107,12 +91,7 @@ export default {
     padding: 0;
 }
 
-/* 侧栏样式 */
-.item-1,
-.menu {
-    background-color: #23a6d5;
-    text-align: center;
-}
+
 
 /* 导航栏的样式 */
 .header {
diff --git a/src/views/navigations/sidebar.vue b/src/views/navigations/sidebar.vue
new file mode 100644
index 0000000..cc34b64
--- /dev/null
+++ b/src/views/navigations/sidebar.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="navigation">
+        <div class="list-group list-group-flush menu" role="tablist" id="list-tab">
+            <!-- <a href="index/list-home" class="list-group-item list-group-item-action" id="list-home-list" data-toggle="list"
+                role="tab" aria-controls="home">dashboard</a> -->
+
+            <router-link class="nav-item" to="/index/list-home" tager="span">DashBoard</router-link>
+            <router-link class="nav-item" to="/index/list-people" tager="span">人员管理</router-link>
+            <router-link class="nav-item" to="/index/list-asset" tager="span">资产管理</router-link>
+            <router-link class="nav-item" to="/index/list-vendor" tager="span">厂商管理</router-link>
+            <router-link class="nav-item" to="/index/list-claims" tager="span">报销管理</router-link>
+            <router-link class="nav-item" to="/index/list-repair" tager="span">维修管理</router-link>
+            <router-link class="nav-item" to="/index/list-permission" tager="span">权限管理</router-link>
+            <router-link class="nav-item" to="/index/list-export" tager="span">列表导出</router-link>
+
+            <!-- <a href="list-people" class="list-group-item list-group-item-action" id="list-people-list" data-toggle="list"
+                role="tab" aria-controls="people">人员管理</a>
+
+            <a href="list-asset" class="list-group-item list-group-item-action" id="list-asset-list" data-toggle="list"
+                role="tab" aria-controls="asset">资产管理</a>
+
+            <a href="list-vendor" class="list-group-item list-group-item-action" id="list-vendor-list" data-toggle="list"
+                role="tab" aria-controls="vendor">厂商管理</a>
+
+            <a href="list-claims" class="list-group-item list-group-item-action" id="list-claims-list" data-toggle="list"
+                role="tab" aria-controls="claims">报销管理</a>
+
+            <a href="list-repair" class="list-group-item list-group-item-action" id="list-repair-list" data-toggle="list"
+                role="tab" aria-controls="repair">维修管理</a>
+
+            <a href="list-permission" class="list-group-item list-group-item-action" id="list-permission-list"
+                data-toggle="list" role="tab" aria-controls="permission">权限管理</a>
+
+            <a href="list-export" class="list-group-item list-group-item-action" id="list-export-list" data-toggle="list"
+                role="tab" aria-controls="export">列表导出</a> -->
+        </div>
+    </div>
+</template>
+
+<style>
+/* 侧栏样式 */
+.item-1,
+.menu {
+    background-color: #23a6d5;
+    text-align: center;
+
+}
+
+.menu a {
+    color: #fff;
+    background-color: #23a6d5;
+    text-decoration: none;
+}
+</style>
\ No newline at end of file