vue实现公共头部尾部的方法

最近在用vue写一个商城项目，因为多个页面都需要头部尾部，故想将公共头部尾部作为组件引入页面。

实现方法如下：

将头部尾部分别写入一个单独的页面。

上代码：

头部：

<template>
    <div class="gs-quick-menu">
        <div class="container">
            <!-- 头部左边 -->
            <div class="gs-profile">
            <span>你好，游客</span>    
            <span><router-link to="/Login">请登录</router-link></span>    
            <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> 购物车
                </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
    },
    
   
  ]
})

这样基本上就实现了。记录完成。

 

来源：https://www.icode9.com/content-4-671651.html