Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码

this.activePage = page.fullPath this.$router.push(this.activePage).catch(e => e) }, closeLeft (tabKey) { const index = this.pageList.findIndex(item => item.fullPath === tabKey) this.pageList.forEach((route, i) => { if (i < index) { this.clearCache(route) } }) const restPages = this.pageList.slice(index) this.pageList = restPages // 判断当前activePage是否在将要删除的页面中 const curActivePage = restPages.find(item => item.fullPath === this.activePage) if (!curActivePage) { this.activePage = restPages[0].fullPath this.$router.push(this.activePage).catch(e => e) } }, closeRight (tabKey) { const index = this.pageList.findIndex(item => item.fullPath === tabKey) this.pageList.forEach((route, i) => { if (i > index) { this.clearCache(route) } }) const restPages = this.pageList.slice(0, index + 1) this.pageList = restPages // 判断当前activePage是否在将要删除的页面中 const curActivePage = restPages.find(item => item.fullPath === this.activePage) if (!curActivePage) { this.activePage = last(restPages).fullPath this.$router.push(this.activePage).catch(e => e) } }, /** * 缓存控制 */ clearCache (route) { const componentName = last(route.matched).components.default.name this.dustbin.push(componentName) // 清除 }, putCache (route) { const componentName = last(route.matched).components.default.name if (this.dustbin.includes(componentName)) { this.dustbin = this.dustbin.filter(item => item !== componentName) } } }}/** * 获取Tab标签下dom节点中自定义的数据，递归向下查找最多3层（观察Tab组件渲染后的DOM得出） * 该方式属于hack手段，不得已为之 * @param{HTMLElement} target event.target * @param depth 深度 */function getTabKey (target, depth = 0) { if (depth > 2 || !target) { return null } return target.dataset.key || getTabKey(target.firstElementChild, ++depth)}</script>