diff --git a/src/assets/css/commonCss/reset.css b/src/assets/css/commonCss/reset.css
index cfadac7..e2fcea7 100644
--- a/src/assets/css/commonCss/reset.css
+++ b/src/assets/css/commonCss/reset.css
@@ -136,3 +136,8 @@ table {
   position: absolute;
 }
 
+/*导航激活状态*/
+.nav-active{
+  color: #F00;
+}
+
diff --git a/src/components/commonHeaderFooter/VHeader.vue b/src/components/commonHeaderFooter/VHeader.vue
index a3752f0..988ab69 100644
--- a/src/components/commonHeaderFooter/VHeader.vue
+++ b/src/components/commonHeaderFooter/VHeader.vue
@@ -6,9 +6,9 @@
 
       <div class="nav-wrapper widthCommon">
         <ul class="fr nav-main">
-          <li>首页</li>
-          <li>关于我们</li>
-          <li>联系我们</li>
+          <router-link v-for="(i, index) in routerData" :key="index" :to="i.pathLink" tag="li">
+            {{i.name}}
+          </router-link>
         </ul>
       </div>
     </div>
@@ -16,7 +16,16 @@
 
 <script>
 export default {
-  name: 'VHeader'
+  name: 'VHeader',
+  data () {
+    return {
+      routerData:[
+        {name:'首页',pathLink:'/home'},
+        {name:'关于我们',pathLink:'/about'},
+        {name:'联系我们',pathLink:'/contact'},
+      ]
+    }
+  }
 }
 </script>
 
@@ -45,8 +54,10 @@ export default {
     li{
     height: 108px;
     height: 108px;
-      float: left;
+    float: left;
+    margin-left: 30px;
     font-size: 20px;
+    cursor: pointer;
     }
 
 
diff --git a/src/router/index.js b/src/router/index.js
index 5fa7f9d..3374051 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,15 +1,33 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import home from '@/views/home/index'
 
 Vue.use(Router)
 
 export default new Router({
+  linkActiveClass: 'nav-active',
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
-    }
+      name: 'home',
+      component: home
+    },
+    {
+      path: '/home',
+      name: 'home',
+      component: home
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import('@/views/about/index')
+    },
+    {
+      path: '/contact',
+      name: 'contact',
+      component: () => import('@/views/contact/index')
+    },
+
+
   ]
 })
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
index 5b30076..e48ba83 100644
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -8,6 +8,6 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="">
 
 </style>
diff --git a/src/views/contact/index.vue b/src/views/contact/index.vue
index 1e7e3e2..db6708a 100644
--- a/src/views/contact/index.vue
+++ b/src/views/contact/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div></div>
+    <div>lianxi</div>
 </template>
 
 <script>
@@ -8,6 +8,6 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="">
 
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 987a1b4..87b2fbc 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -8,6 +8,6 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="">
 
 </style>