elementPlus | el-tabs 标签管理路由页面

最新推荐文章于 2025-06-13 10:09:37 发布

要加油哦～

最新推荐文章于 2025-06-13 10:09:37 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习 JS学习 vue项目文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_42479421/article/details/134105363

vue学习同时被 3 个专栏收录

70 篇文章

订阅专栏

vue项目

66 篇文章

订阅专栏

JS学习

16 篇文章

订阅专栏

文章介绍了如何在Vue应用中使用ElementUI的el-tabs组件进行路由切换，通过`tab-click`事件实现点击标签时跳转到相应的页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const tabClick = (tab)=>{
    const idx = tab.index
    if(idx == 0){
        router.push('/')
    }
    ...
}
</script>
<template>
    <!-- 撑开 stretch="true" -->
    <el-tabs 
        type="card" 
        tab-position="bottom" 
        class="app-bottom-nav"
        @tab-click="tabClick"
    >
        <el-tab-pane label="推荐" name="1"></el-tab-pane>

</template>

参考：elementui tab标签管理路由页面_this.$tab.openpage-CSDN博客

vue+elementUI el-tabs标签路由切换_element的tab页面切换_柠檬加栤的博客-CSDN博客