vue跳转带head_Vue项目使用全局header踩坑记

开发了一个钉钉内置WebApp，对于钉钉的header操作API非常不满，IOS和安卓下表现不一致，操作困难，API文档写的不详细等等。

这里自己尝试实现一遍这个头部，方便以后使用。

需求：

① header不参与各组件和路由跳转

② header分成左侧返回箭头、中间title和右侧操作区域3部分

③ 左侧箭头可控制是否显示和返回路由URL设置；title使用router设置meta.title；右侧操作要求可以设置文本和各页面点击响应不同事件。

实现：

① 首先肯定是写个头部组件啦，废话不说，源码如下：

// headerMenu.vue

② 然后把上面的头部组件(header-menu)放在App.vue中router-view上方：

// App.vue

③ 然后是实现header-menu组件和各个子组件之间的通讯问题，这里本人通过挂载在根vue实例下的一个事物总线实现：

// main.js

import Vue from 'vue'

import '@/permission' // 引入全局导航守卫

Vue.prototype.$newVue = new Vue()

// xxx.vue文件使用这个公共头部:

beforeRouteEnter(to, from, next) {

next(vm => {

vm.$newVue.$emit('header-setting', {

needBack: fa