vue如何点击多个tab标签打开关闭多个页面_vue.js_

{ path:'/addtab', redirect:'/addtab/index',//重定向 输入/addtab 地址会变为/addtab/index component: Main, children:[ { path:'index',//当addtab/index匹配成功时 TabContent会被渲染在Main中的router-view中 name:'TabContent', component:()=>import("@/components/TabContent") } ] }, { path:'/addicon', redirect:'/addicon/index', component: Main, children:[ { path:'index', name:'IconContent', component:()=>import("@/components/IconContent") } ] }

 addTags(){ const route=this.$route;//获取地址栏路由 this.$store.commit({ type:'addTags', route }) } 在store.js中 addTags(state, payload) { let flag = state.visitedTags.some( item => item.path === payload.route.path );//打开标签后，判断数组中是否已经存在该路由 if (!flag) { state.visitedTags.push( Object.assign( {}, { path: payload.route.path, name: payload.route.name, params: payload.route.params } ) ); } //数组中路由存在不push ,单击左侧路由变化,点击标签路由变化均触发 } //添加标签

 watch:{ $route(){ this.addTags(); }//地址栏变化了就触发这个添加方法 }

 closeTags(state, payload) {       for (const [key, item] of state.visitedTags.entries()) {         if (item.path === payload.view.path) {           state.visitedTags.splice(key, 1);           break;         }       }     } //如果要关闭的标签在路由中存在则删除     

     isActive(route) {         return route.path === this.$route.path       },//当前地址栏路径是否与渲染的路径相同 样式匹配       closeSelectedTag(view){          this.$store.dispatch({            type:"closeTags",            view          }).then((views)=>{             此时的views是指的被删除后的visitedViews数组中存在的元素            if (this.isActive(view)) {             当前关闭的标签是否是被选中的标签              const latestView = views.slice(-1)[0];              if (latestView) {                this.$router.push(latestView);//如果数组不为空则让选中的标签为紧邻关闭标签的那一个              } else {                this.$router.push('/') ;//如果为空则页面跳转到/              }            }          })       }

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 路由导航start // 缓存组件页面 catch_components: [], // 当前选中的菜单 - 默认选择首页 activePath: '/index', // 菜单项 - 默认需要展示的页面() tabList: [{ path: '/index', label: '首页', name: 'index', fullPath: "/index" }], // 路由导航end }, // 更改vuex的store中状态的唯一方法 - 同步操作 mutations: { // 路由导航start //清空vuex数据 clearVUEX(state) { state.catch_components = [] state.activePath = 'index' state.tabList = [{ path: '/idnex', label: '首页', name: 'index', fullPath: "/index" }] }, // 跳转页面执行 selectMenu(state, submenu) { // 首页就是 wellcome 也就是 home if (submenu.name === 'index') { submenu.name = 'index' label.path = '首页' submenu.path = '/index' submenu.fullPath= '/index' } // 当前选中菜单 var activePath = submenu.name // 历史已选中菜单列表 var oldTabList = state.tabList // 将菜单信息添加到tablist - 添加时判断是否已有该路由标签 var result = oldTabList.some(item => { if (item.name === activePath) { // console.log('--------', item.fullPath != submenu.fullPath) // 有该路由标签是否为多次点击(相当于查看同路由下的详情，该过程只改变了参数) if (!item.fullPath != submenu.fullPath) { item.fullPath = submenu.fullPath } return true } }) // 如果不包含该对象，则添加 if (!result) { oldTabList.push({ path: submenu.name, name: submenu.name, label: submenu.label, fullPath: submenu.fullPath }) } // 重新赋值标签路由和当前选中菜单 state.activePath = activePath state.tabList = oldTabList }, // 添加keepalive缓存 addKeepAliveCache(state, val) { // 如果是首页不缓存 if (val === 'index') { return } // console.log(state.catch_components) // 添加时判断，如果该组件已存在，便不添加 if (state.catch_components.indexOf(val) === -1) { // 不存在，缓存页面 state.catch_components.push(val) } }, // 删除keepalive缓存 removeKeepAliveCache(state, val) { let cache = state.catch_components for (let i = 0; i < cache.length; i++) { if (cache[i] === val) { cache.splice(i, 1); } } state.catch_components = cache }, //关闭菜单 closeTab(state, val) { // 重新赋值 state.activePath = val.activePath state.tabList = val.tabList }, // 点击标签选择菜单 changeMenu(state, val) { state.activePath = val }, // 路由导航end }, actions: { } })