vue3 element 页面切换

如果你想实现页面切换效果，你可以使用 Vue 3 和 Element Plus 的 `el-tabs` 和 `el-tab-pane` 组件。下面是一个示例：

<template>
  <div>
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="Tab 1" name="tab1">
        <!-- Tab 1 的内容 -->
        <h3>Tab 1 Content</h3>
        <p>This is the content of Tab 1</p>
      </el-tab-pane>
      <el-tab-pane label="Tab 2" name="tab2">
        <!-- Tab 2 的内容 -->
        <h3>Tab 2 Content</h3>
        <p>This is the content of Tab 2</p>
      </el-tab-pane>
      <el-tab-pane label="Tab 3" name="tab3">
        <!-- Tab 3 的内容 -->
        <h3>Tab 3 Content</h3>
        <p>This is the content of Tab 3</p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1',
    };
  },
  methods: {
    handleTabClick(tab) {
      console.log('Tab clicked:', tab.name);
    },
  },
};
</script>

<style>
@import 'element-plus/packages/theme-chalk/src/index';
</style>

在上述示例中，我们使用了 `el-tabs` 组件来创建标签页，并使用 `el-tab-pane` 组件来定义每个标签页的内容。`v-model` 指令绑定了当前激活的标签页，通过修改 `activeTab` 数据可以控制当前显示的标签页。

你可以根据需要添加更多的 `el-tab-pane` 组件，每个组件代表一个标签页。在点击标签页时，`@tab-click` 事件会触发对应的方法，你可以在这个方法中处理相关逻辑。

记得在你的组件中引入 Element Plus 的样式。这样就可以实现简单的页面切换效果了。

希望对你有所帮助！如果你有任何其他问题，请随时提问。