elmentUI使用tabs标签页展示动态路由

elementUI中tabs标签页中展示动态路由内容

• 在home界面中添加tabs标签页，导航栏点击坐标路由时，在标签页中，展示路由中的数据。实现动态的效果。

vuex中存储数据

• 在vue的vuex中存储，标签页路由的相关数据

• store.index.js文件中：

    export default new Vuex.Store({
      state: {
        openTab:[],//所有打开的路由
        activeIndex:'/home/main' , //也可以是默认激活路径；激活状态
      },
      mutations: {
        // 添加tabs
        add_tabs (state, data) {
          this.state.openTab.push(data);
        },
        // 删除tabs
        delete_tabs (state, route) {
          let index = 0;
          for (let option of state.openTab) {
            if (option.route === route) {
              break;
            }
            index++;
          }
          this.state.openTab.splice(index, 1);
        },
        // 设置当前激活的tab
        set_active_index (state, index) {
          this.state.activeIndex = index;
        },
      },
    
      actions: {
      },
      modules: {
      }
    })
  

home主页面中

• 如果home作为项目的主页面，就在home页面中添加以下方法：

      methods:{
        //tab标签点击时，切换相应的路由
        tabClick(tab){
          console.log("tab",tab);
          console.log('active',this.$store.state.activeIndex);
          this.$router.push({path: this.$store.state.activeIndex});
        },
        //移除tab标签
        tabRemove(targetName){
          console.log("tabRemove",targetName);
          //首页不删
          if(targetName == '/home/main'){
            return
          }
          this.$store.commit('delete_tabs', targetName);
          if (this.$store.state.activeIndex === targetName) {
            // 设置删除后，重新激活的路径
            if (this.$store.state.openTab && this.$store.state.openTab.length >= 1) {
              console.log('=============',this.$store.state.openTab[this.$store.state.openTab.length-1].route)
              //设置路由展示，为索引前一个路由
              this.$store.commit('set_active_index', this.$store.state.openTab[this.$store.state.openTab.length-1].route);
              //跳转路由
              this.$router.push({path: this.$store.state.activeIndex});
            } else {
              //否则 跳转到首页
              this.$router.push({path: '/home/main'});
            }
          }
        }
      },
      mounted () {
        // 刷新时以当前路由做为tab加入tabs
        // 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
        // 当当前路由是首页时，添加首页到store，并设置激活状态
       if (this.$route.path !== '/' && this.$route.path !== '/home/main') {
          console.log('1');
          this.$store.commit('add_tabs', {route: '/home/main' , name: '首页'});
          //通过路由的判断，来加入标签页的名称
          if(this.$route.path == "/home/userList"){
            this.$store.commit('add_tabs', {route: this.$route.path , name: "用户列表"});
          }
          if(this.$route.path == "/home/roleList"){
            this.$store.commit('add_tabs', {route: this.$route.path , name: "角色列表"});
          }
          this.$store.commit('set_active_index', this.$route.path);
        } else {
          console.log('2');
          this.$store.commit('add_tabs', {route: '/home/main', name: '首页'});
          this.$store.commit('set_active_index', '/home/main');
          this.$router.push('/home/main');
        }
      },
      watch:{
        '$route'(to,from){
            //判断路由是否已经打开
            //已经打开的 ，将其置为active
            //未打开的，将其放入队列里
            let flag = false;
            for(let item of this.$store.state.openTab){
              console.log("item.path",item.route)
              console.log("t0.path",to.path)
    
              if(item.route === to.path){
                console.log('to.path',to.path);
                this.$store.commit('set_active_index',to.path)
                flag = true;
                break;
              }
            }
            if(!flag){
              console.log('to.path',to.path);
              //通过路由的判断，来加入标签页的名称
              if(to.path == "/home/userList"){
                this.$store.commit('add_tabs', {route: to.path, name: "用户列表"});
              }
              if(to.path == "/home/roleList"){
                this.$store.commit('add_tabs', {route: to.path, name: "角色列表"});
              }
              
              this.$store.commit('set_active_index', to.path);
            }
        }
      }
  

elementUI代码

• 在布局的main中书写

    <el-main>
  
      <!-- 内容区 -->
      <div class="app-wrap">
        <!-- 此处放置el-tabs代码 -->
          <div>
            <el-tabs
              v-model="$store.state.activeIndex"
              type="border-card"
              closable
              v-if="$store.state.openTab.length"
                @tab-click='tabClick'
                @tab-remove='tabRemove'
              >
              <!-- 获取vuex中的openTab数组数据，循环展示 -->
              <el-tab-pane
                :key="index"
                v-for="(item, index) in $store.state.openTab"
                :label="item.name"
                :name="item.route"
              >
              <div class="content-wrap" style="height:100%">
                <!-- 展示路由内容 -->
                <router-view/>
              </div>
              </el-tab-pane>
            </el-tabs>
          </div>
      </div>
  
    </el-main>
  

    </el-main>