vue實現公共頭部尾部的方法

最近在用vue寫一個商城項目，因為多個頁面都需要頭部尾部，故想將公共頭部尾部作為組件引入頁面。

實現方法如下：

將頭部尾部分別寫入一個單獨的頁面。

上代碼：

頭部：

<template>
    <div class="gs-quick-menu">
        <div class="container">
            <!-- 頭部左邊 -->
            <div class="gs-profile">
            <span>你好，游客</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span><router-link to="/Login">請登錄</router-link></span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span><router-link to="/Register">免費注冊</router-link></span>
            </div>
            <!-- 頭部右邊 -->
            <ul class="gs-nav">
            <li class="gs-nav-item">
                <router-link class="gs-link" to="/order">我的訂單</router-link>
            </li>
            <li class="gs-nav-item">
                <router-link class="gs-link" to="/cart">
                <i class="fa fa-shopping-cart"></i>&nbsp;購物車
                </router-link>
            </li>
            <li class="gs-nav-item">
                <span class="gs-link gs-forbid">收藏夾</span>
            </li>
            <li class="gs-nav-item">
                <span class="gs-link gs-forbid">商家入口</span>
            </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name:"ShopHeader"
}
</script>
<style  scoped>

.container{
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}
.gs-link {
    color: #999;
    text-decoration: none;
    outline: none;
  }
  .gs-forbid {
    cursor: not-allowed;
  }
  .gs-menu-bg {
    position: absolute;
    width: 100%;
    height: 30px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #e5e5e5;
  }
  .gs-header {
    width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }
  .gs-quick-menu {
    position: relative;
    font-size: 12px;
    color: #999;
    background-color: #f2f2f2;
     height: 30px;
  }
  .gs-profile {
    display: inline-block;
    line-height: 30px;
    cursor: pointer;
    float: left;
  }
  .gs-nav {
    display: inline-block;
    line-height: 30px;
    list-style: none;
    margin: 0;
    float: right;
  }
  .gs-nav-item {
    margin-left: 12px;
    display: inline-block;
  }
</style>

尾部：

<template>
    <!-- 底部開始 -->
    <div class="footer">
      <ul>
        <li v-for="(item,index) in footerList" :key="index">
            <router-link to="">{{item}}</router-link>|
        </li>
      </ul>
    </div>
    <!-- 底部結束 -->
</template>
<script>
export default {
    name:"ShopFooter",
    data(){
        return{
            footerList:[
               '首頁',
               '關於我們',
               '聯系我們',
               '商城公告',
               '幫助中心',
               '支付中心',
               '客服中心',
               '購尚商城版權所有',
               '粵ICP備17034460119',
               '18318581933',
             ]
        }
    }
}
</script>
<style  scoped>
.footer{
      width: 100%;
      height: 60px;
      background: #f5f5f5;
      border-top: 1px solid #ccc;
      /* position: absolute;
      bottom: 0; */
    }
    .footer ul{
      padding: 0;
      width: 1000px;
      margin: 0 auto;
      height: 100%;
    }
    .footer ul li{
      line-height: 60px;
      float: left;
      color: #999;
      list-style: none;
    }
    .footer ul li a{
      padding-left: 10px;
      padding-right: 10px;
      font-size: 14px;
    }
</style>

然后寫一個Home頁面將頭部尾部引入

<template>
  <div class="home">
    <shop-header></shop-header>
    <router-view></router-view>
   <shop-footer></shop-footer>
  </div>
</template>


<script>
  import ShopHeader from './ShopHeader'
  import ShopFooter from './ShopFooter'

  export default {
    name: 'home',
    components:{
      ShopHeader,ShopFooter
    },


  }
</script>


<style scoped>
</style>

下面是路由配置！！！很重要

在index.js使用router-view子路由實現

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Register from '@/components/Register'
import Home from '@/components/Home'
import Index from '@/components/Index'
import detail from '@/components/detail'




Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Home,
      children:[
        {
          path: '/',
          component:Index
        },
        {
          path: '/detail',
          component:detail
        },
      ]

    },
    {
      path: '/Login',
      component: Login
    },
    {
      path: '/Register',
      component: Register
    },
    
   
  ]
})

這樣基本上就實現了。記錄完成。