elementplus的el-tabs路由式

devtools/2025/3/31 22:52:58/

在使用 Element Plus 的 el-tabs 组件，实现路由式的切换（即点击标签页来切换不同的路由页面）。下面是一个基于 Vue 3 和 Element Plus 实现路由式 el-tabs 的基本步骤和示例。

步骤 1: 安装必要的库

在vue3项目安装 Vue Router 和 Element Plus。

src/main.js:

javascript">import { createApp } from 'vue';
import App from './components/el-tabs.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';const app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.mount('#app');

步骤 2: 设置 Vue Router

设置 Vue Router。例如，创建一个简单的路由配置，比如有两个页面：TabOne.vue 和 TabTwo.vue。

src/components/TabOne.vue:

javascript"><template><div class="hello"><div style="color: red">这是配置管理子组件TabOne</div></div>
</template>
<style scoped >
.hello{width: 100%;height: 600px;display: flex;justify-content: center;align-items: center;background-color: #CAE1FF;
}
</style>

src/components/TabTwo.vue:

javascript"><template><div class="hello"><div style="color: red">这是配置管理子组件TabTwo</div></div>
</template><style scoped >
.hello{width: 100%;height: 600px;display: flex;justify-content: center;align-items: center;background-color: #CAE1FF;
}
</style>

src/components/el-tabs.vue:

javascript">// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import TabOne from '../components/TabOne.vue';
import TabTwo from '../components/TabTwo.vue';const routes = [{ path: '/tab-one', name: 'TabOne', component: TabOne },{ path: '/tab-two', name: 'Profile', component: TabTwo },];const router = createRouter({history: createWebHistory(),routes,
});export default router;

步骤 3: 使用 `el-tabs` 和 Vue Router

在 Vue 组件中使用 el-tabs，并通过监听 el-tab-pane 的 name 属性与 Vue Router 的 to 属性相匹配来实现路由跳转。

javascript"><template><el-tabs v-model="activeTab" @tab-click="handleTabClick"><el-tab-pane label="Tab 1" name="/tab-one"> </el-tab-pane> <!-- 注意这里使用的是路径 --><el-tab-pane label="Tab 2" name="/tab-two"> </el-tab-pane> <!-- 注意这里使用的是路径 --></el-tabs><router-view/> <!-- 使用 router-view 来显示当前路由对应的组件 -->
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';const router = useRouter();const activeTab = ref('/tab-one'); // 默认激活的标签页const handleTabClick = (tab) => {router.push(tab.props.name); // 切换路由到对应的标签页路径}</script>