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

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

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

elmentUI使用tabs标签页展示动态路由_第1张图片

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中书写

      
    
        
        
    

你可能感兴趣的:(vue)