修复：当快速频繁切换页签时页面内容空白

package.json

@@ -10,7 +10,7 @@
   "author": "碧海幽虹",
   "private": false,
   "license": "MIT",
-  "main": "dist/lib/vue-router-tab.common.js",
+  "main": "dist/lib/vue-router-tab.umd.min.js",
   "scripts": {
     "demo:serve": "vue-cli-service serve",
     "demo:build": "vue-cli-service build --dest dist/demo",

src/lib/RouterTab/components/RouterTab.js

@@ -65,6 +65,7 @@ export default {
       })
     }
   },
+
   data () {
     return {
       loading: false, // 路由页面loading
@@ -119,6 +120,7 @@ export default {
       this.loading = false
       this.hideContextmenu()
       this.updateActivedTab()
+      this.fixCommentPage()
     },
 
     activedTab () {
@@ -346,8 +348,16 @@ export default {
     },
 
     // 重载路由组件
-    reloadRouter () {
-      this.isRouterAlive = false // 页面过渡结束后会设置为true
+    reloadRouter (ignoreTransition = false) {
+      this.isRouterAlive = false
+
+      // 默认在页面过渡结束后会设置 isRouterAlive 为 true
+      // 如果过渡事件失效，则需传入 ignoreTransition 为 true 手动更改
+      if (ignoreTransition) {
+        this.$nextTick(() => {
+          this.isRouterAlive = true
+        })
+      }
     },
 
     // 页签过渡结束
@@ -394,6 +404,13 @@ export default {
       if ($cur && isScroll) {
         scrollTo($scr, $cur.offsetLeft + ($cur.clientWidth - $scr.clientWidth) / 2)
       }
+    },
+
+    // 修复：当快速频繁切换页签时，旧页面离开过渡效果尚未完成，新页面内容无法正常mount，内容节点为comment类型
+    fixCommentPage () {
+      if (this.$refs.routerAlive.$el.nodeType === 8) {
+        this.reloadRouter(true)
+      }
     }
   }
 }

src/lib/RouterTab/scss/RouterTab.scss

@@ -180,7 +180,8 @@ $color-primary: #409eff;
   &-container {
     position: relative;
     flex: auto;
-    overflow: hidden auto;
+    overflow-x: hidden;
+    overflow-y: auto;
     background: #fff;
 		transition: all .4s ease-in-out;
   }