vue3实现根据左侧树实现右侧不同页面的demo

这里是一个简单的 Vue3 实现根据左侧树实现右侧不同页面的 demo：

<template>
  <div class="wrapper">
    <div class="sidebar">
      <ul>
        <li v-for="(item, index) in menu" :key="index" @click="changePage(item)">
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import Page1 from './Page1.vue';
import Page2 from './Page2.vue';
import Page3 from './Page3.vue';

export default {
  name: 'App',
  components: {
    Page1,
    Page2,
    Page3,
  },
  setup() {
    const currentPage = ref('Page1');

    const menu = [
      { name: 'Page1', component: 'Page1' },
      { name: 'Page2', component: 'Page2' },
      { name: 'Page3', component: 'Page3' },
    ];

    const changePage = (item) => {
      currentPage.value = item.component;
    };

    return {
      currentPage,
      menu,
      changePage,
    };
  },
};
</script>

在上面的代码中，我们将左侧菜单的选项存储在一个数组中，并且为每个菜单项指定了相应的组件。 `changePage` 方法将当前页面设置为选定菜单项的组件名称。 然后，我们在 `<router-view>` 中使用 `currentPage` 属性来动态渲染不同的页面组件。