NavMenu 导航菜单水平选中二级菜单上面一级菜单的字变成相应二级菜单的字

要实现水平选中二级菜单时，上面一级菜单的字变成相应二级菜单的字，可以在NavMenu组件中添加一个方法，用来获取当前选中的二级菜单的标题，例如：

methods: {
  getActiveSubMenuTitle() {
    const activeSubMenu = this.$refs.menu.$children.find(item => item.$el.classList.contains('is-active'))
    if (activeSubMenu) {
      return activeSubMenu.$el.querySelector('.el-menu-item__title').textContent
    } else {
      return ''
    }
  }
}

其中，$refs.menu是NavMenu组件中el-menu组件的引用，$children是el-menu组件中所有menu-item组件的数组。通过遍历menu-item组件，找到含有is-active类的menu-item组件，然后获取其中的标题内容。

接着，在NavMenu组件中，可以利用ElementUI提供的slot-scope属性和v-slot指令来自定义NavMenu组件的菜单项模板，例如：

<el-menu-item 
  v-for="item in menuList" 
  :key="item.path" 
  :index="item.path"
  :route="{path: item.path}"
  :class="{'is-active': item.path === activePath}"
>
  <i :class="item.icon"></i>
  <template v-slot:title>
    <span>{{item.title}}</span>
    <span v-if="item.children">{{getActiveSubMenuTitle()}}</span>
  </template>
</el-menu-item>

其中，title插槽用来渲染菜单项的标题内容，如果该菜单项有子菜单，则在标题后面添加当前选中的子菜单的标题内容。

最后，在NavMenu组件中添加一个watcher，用来监听$route对象的变化，如果变化了，则更新activePath和activeSubMenuTitle属性，例如：

data() {
  return {
    activePath: this.$route.path,
    activeSubMenuTitle: ''
  }
},
watch: {
  '$route.path'(newVal) {
    this.activePath = newVal
    this.activeSubMenuTitle = this.getActiveSubMenuTitle()
  }
}

这样，就可以实现水平选中二级菜单时，上面一级菜单的字变成相应二级菜单的字了。