vue+element后台管理系统+TagsView基础版

TagsView基础版

1. 使用框架、插件

vue2+element+vuex

2. 大概思路

• 大概需求：

1、从效果图看，【人类】这个首页的tag一开始就存在，且不能被删除
2、当点击左侧栏的时候,如果没有与该菜单相应的tag则新增，如果存在，变成选中状态
3、删除tag时，存在几种情况，若删除的tag是当前页面的tag，那么路由就要跳转；如果删除的tag不是当前页面的tag，则不需要跳转路由
4、若删除的tag是当前页面的tag，有分两种情况：如果是最后一个tag被删，那往前一个tag跳转相应的路由；如果不是最后一个tag，则往其后一个tag跳转相应的路由

注意：基础版不考虑切换路由，仍保存组件不被销毁

• 大概思路：

1、vuex中存储tag的数据，包括设置一个首页基础数据，格式大体如下；

 tabsList:[{
   path:'/hove/person',
   name:'Person',
   label:"人类",
 }]

2、点击左侧菜单栏事件，获取菜单对应的路由信息，添加到vuex中；当点击左侧菜单栏生成相应的tag时，加一个判断，已存在的tag的不再添加

3、点击tag，跳转到对应的路由

4、点击tag的删除，判断是不是当前页面对应的tag；如果是对应的，再判断是不是最后一个tag；如果是最后一个tag被删，那往前一个tag跳转相应的路由；如果不是最后一个tag，则往其后一个tag跳转相应的路由

5、选中激活状态：监听路由，判断tag的数据中的name和当前路由的name是否相同，相同的选中激活状态

3. 大体结构

在home.vue主组件中，引入TagsView.vue组件

• home.vue

// 给 el-menu 的 el-menu-item加上一个点击事件，传入对应的路由参数
// 方法：
click(val){
	//val 是路由信息
	//判断this.tabsList(从vuex中获取的tag的所有数据)是否存在改路由对应的数据
     let res= this.tabsList.some((item)=>{
       if(item.name==val.name){
           return true
       }
     })
     //如果存在，res==》true，直接return
     if(res){
         return
     }else{
     // 如果不存在，调用vuex的方法，传递当前路由对应的tag所需的信息
         this.$store.commit('addTags',{
             name:val.name,
             path:val.meta.fullPath,
             label:val.meta.title
         })
     }
 }

• tagsview.vue

//html
<div class="tabsviews">
     <el-tag
     v-for="(tag,index) in tabsList"
     :key="tag.label"
     //tag是否能被删除
     :closable="tag.name !== 'Person'"
     //tag样式类型
     :type="tag.name==routeName?'warning':''"
     //删除事件
     @close="handleClose(tag.name,index)"
     //点击跳转事件
     @click="changeTabs(tag)"
     >
         {{tag.label}}
     </el-tag>
 </div>

// js部分
import { mapState} from 'vuex' //用来获取vuex的tag的数据

export default {
	data(){
		return{
			routeName:'Person',//用来判断当前tag激活状态，默认首页的[person]
		}
	}，
	watch:{
			//监视路由，一开始就监视，获取routeName，来判断是否激活
            $route:{
                immediate:true,
                handler(val){
                    this.routeName=val.name
                }
            }
      }，
	computed:{
            ...mapState(['tabsList']), //获取vuex的tag的数据
        },
     methods:{
     	//删除
     	handleClose(name,i) {
                //找到对应的tab，删除
                this.tabsList.forEach((item,index) => {
                    if(item.name==name){
                        this.tabsList.splice(index,1)
                    }
                });
 				//判断当前页面是不是被删除的tag相对应
                if(this.$route.name!==name){
                    return 
                }else{
                	//相对应再判断是不是最后一个tag
                    if(i==this.tabsList.length-1){
                         //如果是最后一个，往前一个跳
                        this.$router.push(this.tabsList[i-1].path)
                    }else{
                        this.$router.push(this.tabsList[i].path)
                    }
                }
            },
			
			//点击tag，切换路由
            changeTabs(tag){
            	//如果当前路由与tag是对应的，不需要跳了
                if(this.$route.path==tag.path){
                    return
                }else{
                    this.$router.push(tag.path)
                }
            }
     }
}

• vuex

state: {
    tabsList:[{
      path:'/hove/person',
      name:'Person',
      label:"人类",
    }]
  },
mutations: {
    //添加tags
    addTags(state,val){
      state.tabsList.push(val)
    }
  },