channels_web/src/App.vue

<template>
  <div id="app">
    <div class="centerContent">
      <sidebar v-if="showSidebar"></sidebar>
      <div id="right">
        <topbar v-if="showSidebar" :key="1"></topbar>
        <el-divider v-if="showSidebar"></el-divider>
          <tabbar v-if="showSidebar" :clickIndex='nowindex' :dataList='editableTabs' @itemclick='itemclick' @remove="remove"></tabbar>
          <div class="content">
            <keep-alive :include="include">
              <router-view id="main" />
            </keep-alive>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    menuRouter,
    otherRouter
  } from '@/router/routes.js'
  import store from '@/store/index'
  import sidebar from './components/sidebar/index.vue'
  import topbar from './components/topbar.vue'
  import tabbar from './components/tabbar.vue'
  export default {
    name: 'App',
    components: {
      sidebar,
      topbar,tabbar
    },
    data() {
      return {
        include: [],
        menuDatas: [],
        otherDatas: [],
        allDatas:[],
        editableTabs: [],
        // nowindex:0
      }
    },
    mounted(){
    },
    computed: {
      showSidebar() {
        return this.$route.name != 'login';
      },
      nowindex(){
        return store?.getters?.getTabIndex
      }
    },
    created() {
      menuRouter.forEach(item => {
        if (item.name) {
          this.menuDatas.push(item);
          this.allDatas.push(item)
        }
      });
      otherRouter.forEach(item => {
        if (item.name && (item.name != 'login')) {
          this.otherDatas.push(item);
          this.allDatas.push(item)
        }
      });
      this.editableTabs=store?.getters?.getTabList
    },
    watch: {
      nowindex(val,newval){
        this.$router.push(this.editableTabs[val].path)
      },
      $route(to, from) {
        if (to.meta.keepAlive) {
          !this.include.includes(to.name) && this.include.push(to.name);
        }
        if (to.meta.parentNode && to.meta.parentNode.indexOf(from.name) > -1) {
          !this.include.includes(from.name) && this.include.push(from.name);
        } else if (from.meta.parentNode && from.meta.parentNode.indexOf(to.name) > -1) {} else {
          if (from.meta.parentNode) {
            var index = this.include.indexOf(from.meta.parentNode);
            index !== -1 && this.include.splice(index, 1);
          }
          if (!from.meta.parentNode) {
            var index = this.include.indexOf(from.name);
            index !== -1 && this.include.splice(index, 1);
          }
        }
        // 标签页
        if (to.name != 'login') {
          this.menuDatas.forEach(element => {
            if (element.name == to.name) {
              let isclear=true
              this.editableTabs.forEach(element2 => {
                if(element2.name==to.meta.title){
                  isclear=false //当前页面为菜单页面且不在当前tab中
                }
              })
              if(isclear){
                this.editableTabs = []
              }
            }
          });
          let isAdd=true
          this.editableTabs.forEach((element2,index) => {
              if(element2.name==to.meta.title){
                  isAdd=false //当前页面在tab中
                  // this.nowindex=index
                  store.commit("SET_TABINDEX",index)
              }
          })
          if(isAdd){
            this.editableTabs.push({name:to.meta.title,path:to.path})
            // this.nowindex=this.editableTabs.length-1
            store.commit("SET_TABINDEX",this.editableTabs.length-1)
          }
          store.commit("SET_TABLIST",this.editableTabs)
        }
      }
    },
    methods: {
      remove(item,index){
        // this.nowindex--
        store.commit("SET_TABINDEX",index-1)
        this.editableTabs.splice(index,1)
        store.commit("SET_TABLIST",this.editableTabs)
      },
      itemclick(item,index){
        // this.nowindex=index
        store.commit("SET_TABINDEX",index)
      },
    }
  }
</script>

<style lang="less">
  @import "app.less";
</style>