当前位置：首页 > news >正文

elementplus的el-tabs路由式

news 来源：原创 2025/5/16 3:36:02

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

步骤 1: 安装必要的库

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

src/main.js:

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:

<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:

<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:

// 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 属性相匹配来实现路由跳转。

<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>