帮我写一个 vue 到侧边导航栏

的代码，实现点击导航栏可以切换页面。

当然，非常乐意帮您完成这个任务！以下是一个简单的 Vue 侧边导航栏的代码示例：

<template>
  <div>
    <nav>
      <ul>
        <li v-for="item in menuItems" :key="item.id" @click="changePage(item.id)">
          {{ item.name }}
        </li>
      </ul>
    </nav>
    <div>
      <component :is="currentPage"></component>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: '首页', component: 'Home' },
        { id: 2, name: '关于我们', component: 'About' },
        { id: 3, name: '联系我们', component: 'Contact' }
      ],
      currentPage: 'Home'
    }
  },
  methods: {
    changePage(id) {
      const item = this.menuItems.find(item => item.id === id)
      this.currentPage = item.component
    }
  },
  components: {
    Home: {
      template: '<div>这是首页</div>'
    },
    About: {
      template: '<div>这是关于我们</div>'
    },
    Contact: {
      template: '<div>这是联系我们</div>'
    }
  }
}
</script>

这个代码示例中，我们使用了 Vue 的组件化开发方式，将侧边导航栏和页面内容分别封装成了两个组件。在侧边导航栏中，我们使用了 v-for 指令来遍历菜单项，并使用 @click 事件监听器来响应用户的点击事件。在 changePage 方法中，我们根据用户点击的菜单项，动态地改变了当前页面的组件。最后，我们在页面内容中使用了动态组件的方式，将当前页面的组件渲染出来。

希望这个代码示例能够帮助到您！