vue中如何设置点击菜单，菜单内容显示在右侧

在 Vue 中，可以使用组件和路由来实现点击菜单，菜单内容显示在右侧的效果。

首先，可以使用 Vue Router 来实现路由跳转。在路由配置中，可以定义一个路由组件来显示右侧的内容。例如：

const routes = [
  { path: '/', component: Home },
  { path: '/menu1', component: Menu1 },
  { path: '/menu2', component: Menu2 }
]

其中，`Home` 组件可以显示默认的右侧内容，`Menu1` 和 `Menu2` 组件分别对应菜单中的两个选项。

接下来，可以在菜单组件中添加点击事件，触发路由跳转。例如：

<template>
  <div>
    <ul>
      <li @click="goToMenu1">Menu 1</li>
      <li @click="goToMenu2">Menu 2</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    goToMenu1() {
      this.$router.push('/menu1')
    },
    goToMenu2() {
      this.$router.push('/menu2')
    }
  }
}
</script>

在菜单组件中，使用 `this.$router.push` 方法进行路由跳转，跳转到对应的路由路径。

最后，在右侧内容组件中使用 `<router-view>` 标签来显示对应的内容。例如：

<template>
  <div>
    <h1>Menu 1 Content</h1>
    <p>This is the content for Menu 1.</p>
  </div>
</template>

使用以上方法，就可以实现点击菜单，菜单内容显示在右侧的效果。