VUE实现TAB切换不同页面

天农学子2024-08-06 20:34

VUE实现TAB切换不同页面

实现效果

资源准备

ReceiveOrderList,

TodoListMulti,

SignList

这三个页面就是需要切换的页面

首页代码

javascript 复制代码

<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中动态变化内容；

此方法的优点就是避免不同页面相同变量引发的混乱，如果是对已有的页面进行整合效果更好！