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

  //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:


* 标签页的初始渲染

{{tag.title}}

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到数组中去，数组会进行改变

methods:{
    addViewTags(){//路由改变时执行的方法
      if(this.$route.name){
        const route = this.$route
         this.$store.dispatch('addVisitedViews',route);
      }
    },   
  }

• 关闭一个标签页：
  delSelectTag()方法用来关闭一个标签页，在此会执行提交store中delVisitedViews方法，需要在该方法执行完删除数组中的数据后，再进行更改路由；

methods:{
    delSelectTag(route){//先提交删除数据的方法,数组删除出掉数据后，如果关闭的是当前打开的路由需要将路由改为数组最后一次push进去的路由
      this.$store.dispatch('delVisitedViews',route).then((views)=>{
 if(this.isActive(route)){//只有在关闭当前打开的标签页才会有影响
 let lastView = views.slice(-1)[0]//选取路由数组中的最后一位
 if(lastView){
 this.$router.push(lastView);
 }else{


### 最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。



不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![在这里插入图片描述](https://img-blog.csdnimg.cn/87c2dbe3aa9546dab0e3e5c674753150.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)  

![在这里插入图片描述](https://img-blog.csdnimg.cn/a3cbdf94b9be48529119539cde243f97.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)



![在这里插入图片描述](https://img-blog.csdnimg.cn/0f2364db34af4d57b77547b5f312230a.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)

![在这里插入图片描述](https://img-blog.csdnimg.cn/187f1f54cfd94cf7b88a363ffa363f10.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)