vue的多标签页实现_vue 记录当前已经打开的标签页，前端Apk安装过程文末 js前端的重头戏，值得花大部分时间学习。

文末

js前端的重头戏，值得花大部分时间学习。

JavaScript知识

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

前端电子书

另外，大推一个网上教程现代 JavaScript 教程，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

288页面试题 开源分享：docs.qq.com/doc/DSmRnRG…

本文单就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 :容器组件

visitedViews来自计算属性：

computed:{
    visitedViews(){//store中取值
      return this.$store.state.tagsview.visitedviews
    }
  },

isActive()方法是用来判断页签的路由是否为当前路由

methods:{
    isActive(route){
      return route.path == this.$route.path
    },
  }

打开一个标签页

另外，点击左侧菜单树，或者点击其他的tab页签，会导致路由的改变，那么就需要一个watcher

watch:{
    $route(){
      this.addViewTags();
    }
  },

addViewTags()方法是在路由改变时候触发的，会去提交store中的addVistitedViews方法，该方法会根据state中存放的路由数据来判断新打开的路由之前有没有存放过，如果没有push到数组中去，数组会进行改变

文末