公共底部

liuqimichale
1 parent f63aa685
Showing 6 changed files with 47 additions and 13 deletions
src/assets/css/commonCss/reset.css
src/components/commonHeaderFooter/VHeader.vue
src/router/index.js
src/views/about/index.vue
src/views/contact/index.vue
src/views/home/index.vue
@@ -136,3 +136,8 @@ table {
   position: absolute;
 }
  
+/*导航激活状态*/
+.nav-active{
+  color: #F00;
+}
+
@@ -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;
     }
  
  
 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')
+    },
+
+
   ]
 })
@@ -8,6 +8,6 @@ export default {
 }
 </script>
  
-<style scoped lang="scss">
+<style scoped lang="">
  
 </style>
 <template>
-    <div></div>
+    <div>lianxi</div>
 </template>
  
 <script>
@@ -8,6 +8,6 @@ export default {
 }
 </script>
  
-<style scoped lang="scss">
+<style scoped lang="">
  
 </style>
@@ -8,6 +8,6 @@ export default {
 }
 </script>
  
-<style scoped lang="scss">
+<style scoped lang="">
  
 </style>