Commit 643de4c7d2a461914b1b402d22094db6939033b8
1 parent
f63aa685
公共底部
Showing
6 changed files
with
47 additions
and
13 deletions
src/assets/css/commonCss/reset.css
src/components/commonHeaderFooter/VHeader.vue
| @@ -6,9 +6,9 @@ | @@ -6,9 +6,9 @@ | ||
| 6 | 6 | ||
| 7 | <div class="nav-wrapper widthCommon"> | 7 | <div class="nav-wrapper widthCommon"> |
| 8 | <ul class="fr nav-main"> | 8 | <ul class="fr nav-main"> |
| 9 | - <li>首页</li> | ||
| 10 | - <li>关于我们</li> | ||
| 11 | - <li>联系我们</li> | 9 | + <router-link v-for="(i, index) in routerData" :key="index" :to="i.pathLink" tag="li"> |
| 10 | + {{i.name}} | ||
| 11 | + </router-link> | ||
| 12 | </ul> | 12 | </ul> |
| 13 | </div> | 13 | </div> |
| 14 | </div> | 14 | </div> |
| @@ -16,7 +16,16 @@ | @@ -16,7 +16,16 @@ | ||
| 16 | 16 | ||
| 17 | <script> | 17 | <script> |
| 18 | export default { | 18 | export default { |
| 19 | - name: 'VHeader' | 19 | + name: 'VHeader', |
| 20 | + data () { | ||
| 21 | + return { | ||
| 22 | + routerData:[ | ||
| 23 | + {name:'首页',pathLink:'/home'}, | ||
| 24 | + {name:'关于我们',pathLink:'/about'}, | ||
| 25 | + {name:'联系我们',pathLink:'/contact'}, | ||
| 26 | + ] | ||
| 27 | + } | ||
| 28 | + } | ||
| 20 | } | 29 | } |
| 21 | </script> | 30 | </script> |
| 22 | 31 | ||
| @@ -45,8 +54,10 @@ export default { | @@ -45,8 +54,10 @@ export default { | ||
| 45 | li{ | 54 | li{ |
| 46 | height: 108px; | 55 | height: 108px; |
| 47 | height: 108px; | 56 | height: 108px; |
| 48 | - float: left; | 57 | + float: left; |
| 58 | + margin-left: 30px; | ||
| 49 | font-size: 20px; | 59 | font-size: 20px; |
| 60 | + cursor: pointer; | ||
| 50 | } | 61 | } |
| 51 | 62 | ||
| 52 | 63 |
src/router/index.js
| 1 | import Vue from 'vue' | 1 | import Vue from 'vue' |
| 2 | import Router from 'vue-router' | 2 | import Router from 'vue-router' |
| 3 | -import HelloWorld from '@/components/HelloWorld' | 3 | +import home from '@/views/home/index' |
| 4 | 4 | ||
| 5 | Vue.use(Router) | 5 | Vue.use(Router) |
| 6 | 6 | ||
| 7 | export default new Router({ | 7 | export default new Router({ |
| 8 | + linkActiveClass: 'nav-active', | ||
| 8 | routes: [ | 9 | routes: [ |
| 9 | { | 10 | { |
| 10 | path: '/', | 11 | path: '/', |
| 11 | - name: 'HelloWorld', | ||
| 12 | - component: HelloWorld | ||
| 13 | - } | 12 | + name: 'home', |
| 13 | + component: home | ||
| 14 | + }, | ||
| 15 | + { | ||
| 16 | + path: '/home', | ||
| 17 | + name: 'home', | ||
| 18 | + component: home | ||
| 19 | + }, | ||
| 20 | + { | ||
| 21 | + path: '/about', | ||
| 22 | + name: 'about', | ||
| 23 | + component: () => import('@/views/about/index') | ||
| 24 | + }, | ||
| 25 | + { | ||
| 26 | + path: '/contact', | ||
| 27 | + name: 'contact', | ||
| 28 | + component: () => import('@/views/contact/index') | ||
| 29 | + }, | ||
| 30 | + | ||
| 31 | + | ||
| 14 | ] | 32 | ] |
| 15 | }) | 33 | }) |
src/views/about/index.vue
src/views/contact/index.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div></div> | 2 | + <div>lianxi</div> |
| 3 | </template> | 3 | </template> |
| 4 | 4 | ||
| 5 | <script> | 5 | <script> |
| @@ -8,6 +8,6 @@ export default { | @@ -8,6 +8,6 @@ export default { | ||
| 8 | } | 8 | } |
| 9 | </script> | 9 | </script> |
| 10 | 10 | ||
| 11 | -<style scoped lang="scss"> | 11 | +<style scoped lang=""> |
| 12 | 12 | ||
| 13 | </style> | 13 | </style> |