阅读量:0
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中动态变化内容；
此方法的优点就是避免不同页面相同变量引发的混乱，如果是对已有的页面进行整合效果更好！
