vue如何实现点击头部一级菜单，侧边栏二三级菜单联动切换

实现点击头部一级菜单，侧边栏二三级菜单联动切换，需要在头部组件中监听一级菜单的点击事件，并在点击时通过 `$router.push` 方法进行路由跳转。同时，需要在侧边栏组件中监听 `$route` 对象的变化，根据当前路由的匹配情况来渲染二三级菜单。

下面是一个简单的实现：

头部组件：

<template>
  <div>
    <ul>
      <li v-for="route in routes" :key="route.path" @click="handleClick(route.path)">
        {{ route.meta.title }}
      </li>
    </ul>
  </div>
</template>

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

侧边栏组件：

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

<script>
export default {
  computed: {
    matchedRoutes() {
      return this.$route.matched.slice(1); // 获取当前路由的匹配子路由（除了头部路由）
    }
  },
  watch: {
    $route() {
      // 路由变化时重新计算匹配路由
      this.$nextTick(() => {
        this.matchedRoutes;
      });
    }
  }
};
</script>

这样，当点击头部一级菜单时，侧边栏二三级菜单会根据当前路由的匹配情况进行切换。