您的位置:首页 > 房产 > 家装 > VUE实现TAB切换不同页面

VUE实现TAB切换不同页面

2024/12/23 9:39:48 来源:https://blog.csdn.net/weixin_43159039/article/details/140867036  浏览:    关键词:VUE实现TAB切换不同页面

VUE实现TAB切换不同页面

实现效果

在这里插入图片描述

资源准备

ReceiveOrderList,
TodoListMulti,
SignList
这三个页面就是需要切换的页面

首页代码

<template><div><el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick"><el-tab-pane name="ReceiveOrderList"><span slot="label"> <i class="el-icon-date"></i> <el-badge :value="9999" :max="99" class="item">待接单</el-badge></span></el-tab-pane><el-tab-pane name="TodoListMulti"><span slot="label"> <i class="el-icon-truck"></i> <el-badge :value="31" :max="99" class="item">待发货</el-badge></span></el-tab-pane><el-tab-pane name="SignList"><span slot="label"> <i class="el-icon-edit-outline"></i> <el-badge :value="21" :max="99" class="item">待签收</el-badge></span></el-tab-pane></el-tabs><keep-alive><component :is="activeTabComponent"></component></keep-alive></div>
</template><script>
import ReceiveOrderList from '@/views/orderCenter/receiveOrderList'
import TodoListMulti from '@/views/dispatch/todoListMulti'
import SignList from '@/views/dispatch/signList'export default {data() {return {activeTab: 'ReceiveOrderList',componentMap: {ReceiveOrderList: ReceiveOrderList,TodoListMulti: TodoListMulti,SignList: SignList}}},computed: {activeTabComponent() {return this.componentMap[this.activeTab]}},methods: {handleTabClick(tab) {this.activeTab = tab.name}}
}
</script>

如果不考虑勋章的话,可以把代码删除掉;
这样就可以实现一个切换不同tab显示不同页面的效果:类似与在iframe中动态变化内容;
此方法的优点就是避免不同页面相同变量引发的混乱,如果是对已有的页面进行整合效果更好!

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com