vue实现点击顶部导航栏，页面显示对应的侧边栏，侧边栏的每一项对应一个页面

可以通过以下步骤实现：

1. 定义一个顶部导航栏和一个侧边栏组件。

2. 在顶部导航栏组件中，定义一个点击事件处理函数，用来处理用户点击顶部导航栏时，显示对应的侧边栏。

3. 在点击事件处理函数中，通过 $emit() 方法向父组件发送一个事件，告知父组件用户点击了哪个导航栏项。

4. 在父组件中，监听子组件发来的事件，并根据事件参数显示对应的侧边栏。

5. 在侧边栏组件中，定义每一项对应的页面组件，并通过 vue-router 实现页面的路由跳转。

以下是示例代码：

顶部导航栏组件：

<template>
  <div>
    <ul>
      <li @click="handleClick('page1')">Page 1</li>
      <li @click="handleClick('page2')">Page 2</li>
      <li @click="handleClick('page3')">Page 3</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(page) {
      this.$emit('navItemClick', page);
    }
  }
}
</script>

父组件：

<template>
  <div>
    <TopNav @navItemClick="handleNavClick"/>
    <SideNav v-show="showSideNav" :currentPage="currentPage"/>
    <router-view/>
  </div>
</template>

<script>
import TopNav from './TopNav.vue'
import SideNav from './SideNav.vue'

export default {
  components: {
    TopNav,
    SideNav
  },
  data() {
    return {
      showSideNav: false,
      currentPage: ''
    }
  },
  methods: {
    handleNavClick(page) {
      this.showSideNav = true;
      this.currentPage = page;
    }
  }
}
</script>

侧边栏组件：

<template>
  <div>
    <ul>
      <li @click="$router.push('/page1')">Page 1</li>
      <li @click="$router.push('/page2')">Page 2</li>
      <li @click="$router.push('/page3')">Page 3</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['currentPage']
}
</script>

在路由配置中，需要定义每个页面对应的路由：

const router = new VueRouter({
  routes: [
    { path: '/page1', component: Page1 },
    { path: '/page2', component: Page2 },
    { path: '/page3', component: Page3 }
  ]
})