vue的多标签页实现_vue 记录当前已经打开的标签页(1)

点击左侧的菜单栏，会打开相应的标签页，这些标签可以关闭，可以切换；
使用的框架是vue,使用的UI库是element，另外还使用到vue-router和vuex

• 组成Layout的是：

模块	组件名称
头部	Header
左侧菜单	LeftMenu
标签页栏	TagsView
主视口	AppMain

---

本文单就TagsView进行笔记记录
TagsView主要功能：
1.生成打开过的路由，对应当前路由的标签是active状态；
2.切换路由；
3.关闭页签；
4.打开的标签过多，超出容器宽的话，在容器上面可以使用滚轮上下切换（本项目的模块是按照业务划分的，由于放置滚轮的容器是与整个多标签组件并无业务关联的，那么滚轮容器是单独拿出来的一个组件，有自己的滚轮事件，留出slot插槽放入TagsView）

对于多标签页来说，每一个标签是一个router-link，而生成这些标签router-link最重要的是浏览过的路由的记录，并且监听着路由的改变；本项目使用了vuex去记录浏览过的路由；

先说说多标签页的vuex配置：

• 在store/modules/下新建tagsview.js，具体的提交方法会在组件中用到的时候详细分析

const tagsview ={
  state:{
    visitedviews:[],//存放所有浏览过的且不重复的路由数据
  },
  mutations:{//这
        ADD\_VISITED\_VIEWS:(state,view)=>{//打开新页签--添加路由数据的方法      if(state.visitedviews.some(v=>v.path==view.path))return;
      state.visitedviews.push({
        name:view.name,
        path:view.path,
        title:view.meta.title || 'no-title'
      })
    },
    DEL\_VISITED\_VIEWS:(state,view)=>{//关闭页签--删除路由数据的方法
      for(let [i,v] of state.visitedviews.entries()){
        if(v.path == view.path){
          state.visitedviews.splice(i,1)
          break
        }
      }
    }
  },
  actions:{//调用这里去触发mutations，如何调用？在组件内使用this.$store.dispatch('action中对应名字', 参数)
    addVisitedViews({commit},view){//通过解构赋值得到commit方法
      commit('ADD\_VISITED\_VIEWS',view)//去触发ADD_VISITED_VIEWS，并传入参数
    },
    delVisitedViews({commit,state,view){//删除数组存放的路由之后，需要再去刷新路由，这是一个异步的过程，需要有回掉函数，所以使用并返回promise对象，也可以让组件在调用的时候接着使用.then的方法
      //commit('DEL\_VISITED\_VIEWS',view)
      return new Promise((resolve)=>{//resolve方法：未来成功后回掉的方法
 commit('DEL\_VISITED\_VIEWS',view);
 resolve([...state.visitedviews]);
 })
 }

 }
}
export default tagsview

这个moudle写完了之后，别忘记放在Vuex.Store实例中去

import Vue from 'vue';
import Vuex from 'vuex';
import tagsview from './modules/tagsview.js'
import getters from './getter.js'

Vue.use(Vuex)
const store= new Vuex.Store({
  modules:{
    tagsview
  },
  getters
})

export default store

另外getters.js是这样的：

const getters ={
  visitedviews:state => state.tagsview.visitedviews
}
export default getters

---

TagsView.vue:

• 标签页的初始渲染

<template id="">
 <div class="tags-view-container">
 <scroll-panel class="tags-view-wrap">
 <router-link v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path" class="tags-view-item" :class="isActive(tag)?'active':''">
 {{tag.title}}
 <span class='el-icon-close' @click.prevent.stop="delSelectTag(tag)"></span>
 </router-link>
 </scroll-panel>
 </div>
</template>

scroll-panel :容器组件

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader