vue中使用element ui，一级菜单在头部，二三级菜单在侧边栏，点击侧边栏菜单，如何保持头部一级菜单选中状态

可以使用 `vue-router` 中的路由元信息 `meta` 来实现这个功能。首先，在路由配置中，给每个路由添加一个 `meta` 属性，用来存储该路由对应的一级菜单的名称。

const routes = [
  {
    path: '/',
    redirect: '/home',
    meta: {
      title: '首页' // 一级菜单名称
    }
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首页' // 一级菜单名称
    }
  },
  {
    path: '/user',
    component: User,
    children: [
      {
        path: '',
        redirect: 'list'
      },
      {
        path: 'list',
        component: UserList,
        meta: {
          title: '用户列表' // 一级菜单名称
        }
      },
      {
        path: 'detail/:id',
        component: UserDetail,
        meta: {
          title: '用户详情' // 一级菜单名称
        }
      }
    ]
  }
]

然后，在侧边栏菜单组件中，监听路由的变化，并且通过 `this.$route.matched` 获取到当前路由的所有层级，从而获取到当前路由对应的一级菜单名称。最后，将一级菜单名称传递给头部组件，让头部组件来控制一级菜单的选中状态。

<template>
  <div class="sidebar">
    <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect">
      <el-submenu v-for="menu in menus" :key="menu.name" :index="menu.name">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span slot="title">{{ menu.title }}</span>
        </template>
        <el-menu-item v-for="item in menu.children" :key="item.path" :index="item.path">{{ item.title }}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        {
          name: 'home',
          title: '首页',
          icon: 'el-icon-s-home',
          children: [
            {
              path: '/home',
              title: '首页'
            }
          ]
        },
        {
          name: 'user',
          title: '用户管理',
          icon: 'el-icon-user',
          children: [
            {
              path: '/user/list',
              title: '用户列表'
            },
            {
              path: '/user/detail/:id',
              title: '用户详情'
            }
          ]
        }
      ]
    }
  },
  computed: {
    activeMenu() {
      const matched = this.$route.matched
      if (matched.length > 1) {
        return matched[1].meta.title
      }
      return matched[0].meta.title
    }
  },
  methods: {
    handleSelect(index) {
      this.$router.push(index)
    }
  }
}
</script>

最后，在头部组件中，接收到一级菜单名称后，将其和当前路由的一级菜单名称进行比较，如果相等，则设置该菜单为选中状态。

<template>
  <div class="header">
    <div class="logo"></div>
    <el-menu :default-active="activeMenu" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item v-for="menu in menus" :key="menu.name" :index="menu.title">{{ menu.title }}</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        {
          name: 'home',
          title: '首页'
        },
        {
          name: 'user',
          title: '用户管理'
        }
      ]
    }
  },
  props: {
    activeMenu: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleSelect(index) {
      this.$router.push('/' + index.toLowerCase())
    }
  },
  watch: {
    activeMenu(val) {
      this.menus.forEach(menu => {
        menu.active = menu.title === val
      })
    }
  }
}
</script>