vue如何实现一级菜单在头部,二三级在侧边栏的联动效果

实现一级菜单在头部，二三级在侧边栏的联动效果，可以使用 Vue Router 和 Vue 组件来实现。

首先，在路由配置中定义一级菜单对应的路由和二三级菜单对应的子路由，例如：

const routes = [
  {
    path: '/',
    component: Header, // 头部组件
    children: [
      {
        path: '',
        component: Home, // 首页组件
        meta: { title: '首页' } // 一级菜单名称
      },
      {
        path: 'category',
        component: Category, // 分类组件
        meta: { title: '分类' }, // 一级菜单名称
        children: [
          {
            path: 'sub-category',
            component: SubCategory, // 子分类组件
            meta: { title: '子分类' } // 二级菜单名称
          },
          {
            path: 'sub-category/:id',
            component: SubCategoryDetail, // 子分类详情组件
            meta: { title: '子分类详情' } // 三级菜单名称
          }
        ]
      }
    ]
  }
];

然后，在头部组件中渲染一级菜单，并使用 `router-link` 组件设置链接，例如：

<template>
  <div>
    <ul>
      <li v-for="route in routes" :key="route.path">
        <router-link :to="route.path">{{ route.meta.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    routes() {
      return this.$router.options.routes[0].children; // 获取一级菜单的子路由
    }
  }
};
</script>

最后，在侧边栏组件中根据当前路由的匹配情况来渲染二三级菜单，例如：

<template>
  <div>
    <ul>
      <li v-for="route in matchedRoutes" :key="route.path">
        <router-link :to="route.path">{{ route.meta.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    matchedRoutes() {
      return this.$route.matched.slice(1); // 获取当前路由的匹配子路由（除了头部路由）
    }
  }
};
</script>

这样一级菜单和二三级菜单就可以实现联动效果了。当点击一级菜单时，对应的二三级菜单会在侧边栏中显示。