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>
Logo

前往低代码交流专区

更多推荐