想用vue实现多标签打开功能，为什么这么写显示不了标签功能

Question

想用以下代码实现

<el-tabs v-model="pageCurrent" type="card" closable @tab-click='tabChange' @tab-remove="removeTab">
          <el-tab-pane
                  v-for="(item) in pageList"
                  :key="item.name"
                  :name="item.name"
          >
            <span slot="label">
              <span>{{item.label}}</span>
              <span class="refresh">
                <i style="font-size:15px;" @click="refreshModule" class="el-icon-refresh" ></i>
              </span>
            </span>
          </el-tab-pane>
        </el-tabs>

        <keep-alive :exclude="exclude">
          <router-view></router-view>
        </keep-alive>

具体代码如下

<template>
  <el-container style="height: 100%">
    <!--<el-aside width="200px" style="background: #324157">-->
    <admin-menu :isCollapse="isCollapse"></admin-menu>
    <el-main
            class="admin-right-main-container"
            :class="{'admin-right-collapse': isCollapse, 'admin-right-spread': !isCollapse}">
      <el-header class="admin-right-title-container">
        <div class='admin-right-navigation' style="width:100%;overflow: hidden; height: 100%">
          <div class="admin-radio-group">
            <el-radio-group
                    size="small"
                    v-model="isCollapse"
            >
              <el-radio-button :label="false" >展开</el-radio-button>
              <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group>
          </div>
          <!--<span class="demonstration"-->
          <!--style="float:left;padding:5px;color:white;margin-left:2%;width:15%">-->
          <!--<el-input-->
          <!--placeholder="请输入"-->
          <!--icon="search"-->
          <!--v-model="searchCriteria"-->
          <!--:on-icon-click="handleIconClick">-->
          <!--</el-input>-->
          <!--</span>-->
          <span class="user-operation-container" style="float:right;">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" style="color:white">{{usernameDefault}}<i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item @click.native="logoutUser">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
        </div>
      </el-header>
      <el-main class="main-content-container">
        <!--<el-breadcrumb separator="/" class='breadcrumb-container'>-->
        <!--<el-breadcrumb-item-->
        <!--v-for="(item,index) in breadList"-->
        <!--:key="index"-->
        <!--:to="{ path: item.path }"-->
        <!--&gt;{{item.meta.title}}</el-breadcrumb-item>-->
        <!--</el-breadcrumb>-->

        <el-tabs v-model="pageCurrent" type="card" closable @tab-click='tabChange' @tab-remove="removeTab">
          <el-tab-pane
                  v-for="(item) in pageList"
                  :key="item.name"
                  :name="item.name"
          >
            <span slot="label">
              <span>{{item.label}}</span>
              <span class="refresh">
                <i style="font-size:15px;" @click="refreshModule" class="el-icon-refresh" ></i>
              </span>
            </span>
          </el-tab-pane>
        </el-tabs>

        <keep-alive :exclude="exclude">
          <router-view></router-view>
        </keep-alive>
      </el-main>
    </el-main>
  </el-container>
</template>
<script type="text/ecmascript-6">
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
import AdminMenu from './modules/adminMenu/adminMenu'

export default {
  data() {
    return {
      searchCriteria: '',
      breadcrumbItems: ['导航一'],
      isCollapse: false,
      usernameDefault: 'abbott.liu',
      breadList: [],
      pageCurrent:'',
      pageList:[],
      exclude:null,
      condition:true,
    }
  },
  components: {
    AdminMenu
  },
  watch: {
    user: val => {
      console.log('watch user val ======= ', val);
    },
    isCollapse: val => {
      console.log('isCollapse == ', val)
    },
    // 面包屑
    // $route() {
    //   console.log("$route")
    //   this.getBreadcrumb();
    // }
    $route: {
      handler(to, form=null){
        //当路由改变时，检测该路由是否已经在打开的页面之中，如果不在，就添加进去
        this.pageCurrent = to.path;
      },
      immediate: true
    }
  },
  computed: {
    ...mapState('user', {
      state: state => state
    })
  },
  mounted () {
    const _this = this
    // console.log('admin state == ', _this.state)
    // window.addEventListener('scroll', _this.handleScroll)
    // console.log('username == ', JSON.stringify(_this.state.userInfo))
    if(_this.state.userInfo.hasOwnProperty('username')) {
      _this.usernameDefault = _this.state.userInfo.username
    } else {
      // console.log('username == 无')
    }

    _this.getBreadcrumb();
  },
  methods: {
    handleScroll() {
      console.log('handleScroll ')
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      const nav = document.querySelector('.el-menu-nav')
      console.log('nav == ', nav)
      if (scrollTop >= 0 && scrollTop < 171) {
        nav.style.top = '0'
      } else {
        nav.style.top = scrollTop - 171 + 'px'
      }
    },
    logoutUser () {
      console.log('登出')
      this.$router.push('/login')
    },
    isHome(route) {
      console.log('isHome route == ', route)
      return route.name === "Admin";
    },
    getBreadcrumb () {
      let matched = this.$route.matched;
      console.log('matched == ', matched)
      //如果不是首页
      if (!this.isHome(matched[0])) {
        matched = [{ path: "/admin", meta: { title: "首页" } }].concat(matched);
      }
      this.breadList = matched;
    },
    removeTab(targetName){
      let tabs = this.pageList;
      let activeName = this.pageCurrent;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      };
      this.pageCurrent = activeName;
      this.pageList = tabs.filter(tab => tab.name !== targetName);
      this.$router.push({path:activeName})
    },
    tabChange(tab,event){
      this.$router.push({path:tab.name})
    },
    refreshModule(){
      this.exclude = this.$refs.view.$options.name;
      this.condition = !this.condition
      this.$nextTick(_ => {
        this.exclude = null
        this.condition = !this.condition
      })
    }
  },
}
</script>

<style lang="scss">
  @import './assets/styles/cover.scss';
  @import './assets/styles/index.scss';
  .content-container {
    box-sizing: border-box;
    /*background: blue;*/
    padding-right: 50px;
    overflow: hidden;
  }

  .admin-right-navigation {
    /*background: #e6a23c;*/
    background: #ACACAC;
  }

  .el-menu-nav {
    position: absolute;
    top: 0;
    width:210px;
    /*height: 100%;*/
  }

  .el-scrollbar__wrap{
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .el-menu-vertical-demo {
    /*position: fixed;*/
  }
  .side-bar {

  }
  .el-menu{
    border-right-width: 0;
  }
  .el-submenu .el-menu-item {
    min-width: 180px;
  }
  .admin-right-main-container {
    box-sizing: border-box;
  }
  .admin-right-collapse {
    padding: 0 0 0 60px;
  }

  .admin-right-spread {
    padding: 0 0 0 210px;
  }

  .admin-right-title-container {
    padding: 0;
    /*height: 50px!important;*/
  }

  .admin-radio-group {
    float:left;
    /*padding-top:10px;*/
    color:white;
    /*margin-left:1%;*/
    /*background: #F56C6C;*/
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .log-container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: #324157;
    color: #ffffff;
  }

  .default-scroll-bar {
    width: 100%;
    height: 100%;
  }

  .user-operation-container {
    height: 100%;
    /*background: #b3d8ff;*/
    color: #FFF;
    display: flex;
    margin-right: 1%;
    align-items: center;
    .el-dropdown-link {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .main-content-container {
    /*background: fuchsia;*/
    /*height: 100%*/
    padding: 0;
  }

  .breadcrumb-container {
    height: 30px;
    box-sizing: border-box;
    padding-left: 20px;
    background: rgb(240, 242, 245);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ACACAC;
  }
</style>

import Vue from "vue";
import VueRouter from "vue-router";

// 引入组件
// import App from 'src/App';

import UserTable from 'src/views/administration/userTable';
import Admin from 'src/views/admin/admin';
import AddUser from 'src/views/userManage/addUser/addUser';
import DataTmp from 'src/views/admin/modules/dataTmp/dataTmp';
import TaskList from 'src/views/admin/modules/taskList/taskList';
import CustomContainer from 'src/views/customContainer/customContainer';
import PartDraggable from 'src/views/partDraggable/partDraggable';
import TenantMessage from 'src/views/tenantMessage/tenantMessage';
import Gallery from 'src/views/gallery/gallery'
import StudentList from 'src/views/student/studentList';
import StudentAdd from 'src/views/student/studentAdd';

import Article from 'src/views/article/article';

import Login from 'src/views/login/login';

import VideoSocket from 'src/views/VideoSocket';

/**
 * 要告诉 vue 使用的 vueRouter
 * 书写规范：路由中的name都要大写，path都要小写
 */
Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        component: Login
    },
    {
        path: '/manage/userTable',
        component: UserTable
    },
    {
        path: '/admin',
        name: 'Admin',
        component: Admin,
        redirect:'/index',
        meta: { title: '管理系统' },
        children:[
            {
                path: '/index',
                // component: Index,
                component: () => import('src/views/index'),
                meta: { title: '首页' }
            },
            {
                path: '/user_add',
                name: 'AddUser',
                component: AddUser,
            },
            {
                path: '/task_list',
                name: 'TaskList',
                component: TaskList
            },
            {
                path: '/data_tmp',
                name: 'DataTmp',
                component: DataTmp
            },
            {
                path: '/user_list',
                name: 'UserList',
                component: resolve => require(['src/views/userManage/userList/userList'], resolve),
                meta: { title: '用户列表'

Answer 1

我大致看了一下你的代码，真正关键的pageList看到你并没有赋值。我猜想你是想把router里面的部分二级菜单赋值给pageList给pageList吧

 {
                path: '/index',
                // component: Index,
                component: () => import('src/views/index'),
                meta: { title: '首页' }
            },
            {
                path: '/user_add',
                name: 'AddUser',
                component: AddUser,
            },
            {
                path: '/task_list',
                name: 'TaskList',
                component: TaskList
            },
            {
                path: '/data_tmp',
                name: 'DataTmp',
                component: DataTmp
            },
            {
                path: '/user_list',
                name: 'UserList',
                component: resolve => require(['src/views/userManage/userList/userList'], resolve),
                meta: { title: '用户列表' }
            },
            {
                path: '/customContainer',
                name: 'CustomContainer',
                component: CustomContainer
            },
            {
                path: '/partDraggable',
                name: 'PartDraggable',
                component: PartDraggable
            },
            {
                path: '/article',
                name: 'Article',
                component: Article
            },
            {
                path: '/tenant_message',
                name: 'TenantMessage',
                component: TenantMessage,
                meta: { title: '租房信息' }
            },
            {
                path: '/gallery',
                name: 'Gallery',
                component: Gallery,
                meta: { title: '精美图库' }
            },
            {
                path: '/studentList',
                name: 'StudentList',
                component: StudentList
            },
            {
                path: '/studentAdd',
                name: 'StudentAdd',
                component: StudentAdd
            },
            {
                path: '/studentGridContainer',
                name: 'StudentGridContainer',
                component: resolve => require(['src/views/student/studentGridContainer'], resolve)
            },
            {
                path: '/studentGridContainer',
                name: 'StudentGridContainer',
                component: resolve => require(['src/views/student/studentGridContainer'], resolve)
            },
            {
                path: '/music',
                name: 'Music',
                component: resolve => require(['src/views/music/music'], resolve),
                meta: { title: '歌曲列表' }
            },
            {
                path: '/tableOperation',
                name: 'TableOperation',
                component: resolve => require(['src/views/student/tableOperation'], resolve)
            },
            {
                path: '/formOperation',
                name: 'FormOperation',
                component: resolve => require(['src/views/student/formOperation'], resolve)
            }

如果是那样的话，你可以把这部分单独定义为一个数组，然后export出来，在首页中import进来。并把它赋值给pageList，这样应该就可以出来tab标签了。