怒求各位大神用vue做H5的头部处理的经验，小弟谢了

Question

1.开发一个hybrid，要求完全按照APP的形式来做。底部的导航这个好做，我做成根组件下的一个子组件就好了（因为这个导航样式什么的都是固定的，功能就是切换路由很简单），每个页面都能看得到。
2.那么问题来了，头部的导航我目前没任何思路啊，因为头部导航每个页面都不同并且功能事件都不同。
3.我想问的是 到底做成一个组件好 还是放到每个路由的每个页面单独的写头部比较好？如果做成一个组件，那么是如何传参来改变头部的样式或者事件呢，很急。希望大神给点思路。

<!--根组件-->
<template>
  <div id="top">
    <!--这是我现在做成的头部导航 不知道下一步怎么做了-->
    <layout-header :header="headerway"></layout-header>
     <!-- 路由外链 -->
    <router-view transition="expand"></router-view>
    <!--底部的导航-->
    <layout-dock></layout-dock>
  </div>
</template>

如图这种APP 每个人都知道 不同的页面头部是切换的

Answer 1

head 组件模板部分：

<header class="c-header-nav">
    <div class="c-header-nav_action c-header-left">
        <a href="javascript:;" class="" @click="leftAction()">
            <img class="c-header-icon"
                 src="data:image/svg+xml;charset=utf-8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 12 20&quot;&gt;&lt;path d=&quot;M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z&quot; fill=&quot;%23000&quot;/&gt;&lt;/svg&gt;"
                 alt="返回">
        </a>
    </div>
    <div class="c-header-nav_title"><slot></slot></div>

    <div class="c-header-nav_action c-header-right">
        <a href="javascript:;" class="">
            <slot name="right"></slot>
        </a>
    </div>
</header>

使用简单组件：

<c-header-nav>购物车</c-header-nav>

https://m.youcai.xin/cart/0

使用自定义组件：

<c-header-nav class="p-coupon-header-nav">
    <div class="p-coupon-header-nav_title" @click="showDropdown()">
        <label class="c-header-nav_title_text">(% title %)</label>
        <i class="iconfont c-header-nav_icon" :class="{active: show_dropdown}" v-show="state!=2">&#xe608;</i>
        <div class="c-dropdown" v-show='show_dropdown' transition="opacity">
            <label v-for="dropdown in dropdown_list" @click.stop.prevent="selectDropdown($index)">(% dropdown %)</label>
        </div>
    </div>
    <a href="javascript:;" slot="right" @click="show_redeem_view = true">兑换</a>
</c-header-nav>

https://m.youcai.xin/coupon/1

Answer 2

对于这种顶部导航栏变化多的情况
建议先把所有的顶部导航栏都会出现的情况和事件分别列出来
找到比较合理的关联
做到这两点:

• 基本样式可以抽离

• 善用slot组件

• 事件传递和触发 尽量做成可配置的 由父组件决定

因为每个APP的业务逻辑都都是有所偏差的 想综合所有的业务需求只会让你的组件变得无比臃肿和难以维护
所以放弃只写一次的想法 也不能有全部都单独写的想法 无用功太多了