利用vuex关闭当前tab页签

在vuex的js文件中写如下方法：（如果没有vuex的js文件，可以自己写一个，参考另外一篇文章，讲解vuex的）

/*** @class closeNow* @description 关闭当前界面页签（如在工作项详情界面，点击删除按钮，关闭当前这个页签）* @param {Object} state vuex state* @param {Object} param { tagName: 要关闭的标签名字, vm: vue }*/closeNow ({ state, commit, dispatch }, { tagName, vm }) {return new Promise(async resolve => {// 下个新的页面let newPage = state.opened[0]// 如果关闭的页面就是当前显示的页面// 去找一个新的页面let len = state.opened.lengthfor (let i = 1; i < len; i++) {if (state.opened[i].name === tagName) {if (i < len - 1) {newPage = state.opened[i + 1]} else {newPage = state.opened[i - 1]}break}}// 找到这个页面在已经打开的数据里是第几个const index = state.opened.findIndex(page => page.name === tagName)if (index >= 0) {// 更新数据 删除关闭的页面state.opened.splice(index, 1)// 如果这个页面是缓存的页面 将其在缓存设置中删除commit('keepAliveRemove', tagName)}// 持久化await dispatch('opend2db')// 最后需要判断是否需要跳到首页// if (isCurrent) {const { name = '', params = {}, query = {} } = newPagelet routerObj = {name,params,query}vm.$router.push(routerObj)// }// endresolve()})},

在当前界面，用逻辑判断，是否需要关闭当前tab页签，三步
第一步：
引入vuex

import { mapActions } from 'vuex'  /** 删除当前界面步骤 */

第二步：
在methods中，注入

/** 删除当前界面步骤 */
...mapActions('d2admin/page', ['closeNow']),

第三步：删除方法中做逻辑判断

/** 删除当前界面步骤 */
const list = this.$store.state.d2admin.page.opened
list.find((v,index)=>{if(index>0 &&  v.path === this.$route.path.substring(0,this.$route.path.length-1)){this.closeNow({tagName: v.name,vm: this})

利用vuex关闭当前tab页签相关推荐

Axure 9 实战案例，母版的应用 2，运用母版交互绘制Tab页签
前言 Hello!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 上一篇教程我们讲解了运用母版绘制微信APP的导航菜单(点击阅读该教程>>),本篇教程我们继续来 ...
如何动态为 tabstrip 中的 tab 页签指定标题
网上居然搜不到相关的文章,所以我来写一篇吧. 其实就是两个要点,只要注意就行了. 首先,最重要的一点,在绘制屏幕的时候,给 tab 页签的属性指定为"输出字段",这时,它的&quo ...
Bootstrap tab页签刷新加载不显示，只有点击其他标签后第一个才显示
Bootstrap tab页签刷新加载不显示,只有点击其他标签后第一个才显示解决方法: 在tab-content里面的tab-pane中添加active  < ...
浏览器tab页签上的title图标favicon.icon
文章目录浏览器tab页签上的title图标favicon.icon 什么是favicon? 如何查看favicon 在线生成favicon 浏览器tab页签上的title图标如何设置浏览器tab页 ...
Firefox浏览器恢复书签（收藏夹）、历史记录和未关闭的Tab页
平时使用使用Firefox浏览器,总习惯打开很多Tab页而不关闭,下次启动Firefox时自动恢复之前打开的Tab. 有时Firefox会出现异常(突然断电.异常关机等),再打开时浏览器所有的记录都没 ...
Vue头部菜单,点击菜单新增tab页签
Vue头部菜单,点击菜单新增tab页签 <template> <div class="wrapper"> < ...
UltraEdit 设置 tab页签显示
http://blog.itpub.net/22664653/viewspace-704576/ 不小心将ue编辑器设置成了移动窗口,当有多个页面的时候,切换很麻烦,想要将UltraEdit设置为t ...
antd-pro v5版本的tab页签最简实践
antd-pro v5版本的tab页签最简实践前言网上找了很多资料,也看了好些个代码,总觉得他们写的太累赘了.其实官方自己也说了,antdpro做页签和他们的产品理念不符合才不做,但是不代表他们没 ...
tab页签切换----bootstrap
2019独角兽企业重金招聘Python工程师标准>>> 关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: <ul class=&quo ...

利用vuex关闭当前tab页签

利用vuex关闭当前tab页签相关推荐

最新文章

热门文章