解决当前页面加载时切换页面导致回退问题(#37)

package-lock.json

@@ -12538,11 +12538,6 @@
       "resolved": "https://registry.npm.taobao.org/vue-infinite-loading/download/vue-infinite-loading-2.4.5.tgz",
       "integrity": "sha1-zCD9QK9/IBiABkQ8mbYEcM8d4bM="
     },
-    "vue-infinite-scroll": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npm.taobao.org/vue-infinite-scroll/download/vue-infinite-scroll-2.0.2.tgz",
-      "integrity": "sha1-yjepH+ku4K07dKz4aCwAkXFEtxE="
-    },
     "vue-lazyload": {
       "version": "1.3.3",
       "resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.3.3.tgz",

package.json

@@ -30,7 +30,6 @@
     "vue-codemirror": "^4.0.6",
     "vue-i18n": "^8.17.3",
     "vue-infinite-loading": "^2.4.5",
-    "vue-infinite-scroll": "^2.0.2",
     "vue-lazyload": "^1.3.3",
     "vue-router": "^3.1.6",
     "vuex": "^3.4.0"

src/main.js

@@ -11,7 +11,6 @@ import i18n from "./i18n";
 // store
 import store from "@/store/index";
 import VueClipboard from "vue-clipboard2";
-import infiniteScroll from "vue-infinite-scroll";
 import VueLazyload from "vue-lazyload";
 import Viewer from "v-viewer";
 import cdnpath from "./libs/util.cdn";
@@ -27,7 +26,6 @@ Vue.use(ElementUI);
 Vue.use(VueAxios, axios);
 Vue.use(cdnpath);
 Vue.use(VueClipboard);
-Vue.use(infiniteScroll);
 Vue.use(VueLazyload, {
   loading: cdnpath("/images/airplane.gif"),
 });

src/router/index.js

@@ -23,16 +23,16 @@ Vue.use(VueRouter);
 // 导出路由 在 main.js 里使用
 const router = new VueRouter({
   mode: "history",
-  // scrollBehavior(to, from, savePosition) {
+  scrollBehavior(to, from, savePosition) {
-  //   if (savePosition) {
+    if (savePosition) {
-  //     return savePosition;
+      return savePosition;
-  //   } else {
+    } else {
-  //     return {
+      return {
-  //       x: 0,
+        x: 0,
-  //       y: 0,
+        y: 0,
-  //     };
+      };
-  //   }
+    }
-  // },
+  },
   routes,
 });
 

src/store/modules/acrou/modules/cancelToken.js

@@ -4,33 +4,28 @@ export default {
     cancelToken: [],
   },
   actions: {
-        push({
+    push({ commit }, cancelToken) {
-            commit
+      return new Promise((resolve) => {
-        }, cancelToken) {
-            return new Promise(resolve => {
         commit("push", cancelToken);
-                resolve()
+        resolve();
-            })
+      });
     },
-        cancel({
+    cancel({ commit }) {
-            commit
+      return new Promise((resolve) => {
-        }) {
-            return new Promise(resolve => {
         commit("clear");
-                resolve()
+        resolve();
-            })
+      });
     },
   },
   mutations: {
     push(state, cancelToken) {
-            state.cancelToken.push(cancelToken)
+      state.cancelToken.push(cancelToken);
     },
     clear(state) {
-            console.log(state.cancelToken)
+      state.cancelToken.forEach((cancel) => {
-            state.cancelToken.forEach(cancel => {
+        cancel();
-                cancel('路由跳转取消请求');
       });
       state.cancelToken = [];
-        }
+    },
   },
 };

src/views/page/GoList.vue

@@ -1,13 +1,7 @@
 <template>
   <div>
     <headmd :option="headmd" v-if="renderHeadMD && headmd.display"></headmd>
-    <div
+    <div class="golist" v-loading="loading">
-      class="golist"
-      v-loading="loading"
-      v-infinite-scroll="pageLoad"
-      infinite-scroll-disabled="busy"
-      infinite-scroll-distance="10"
-    >
       <list-view
         :data="files"
         v-if="mode === 'list'"
@@ -23,14 +17,19 @@
         :action="action"
         :thum="thum"
       />
-      <!-- <infinite-loading :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading> -->
+      <infinite-loading
-      <div v-show="files.length === 0" class="has-text-centered no-content"></div>
+        v-show="!loading"
-      <center>
+        ref="infinite"
-        <div :class="!busy ? 'is-hidden' : ''">
+        spinner="bubbles"
-          <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
+        @infinite="infiniteHandler"
-          <span class="sr-only">Loading...</span>
+      >
-        </div>
+        <div slot="no-more"></div>
-      </center>
+        <div slot="no-results"></div>
+      </infinite-loading>
+      <div
+        v-show="files.length === 0"
+        class="has-text-centered no-content"
+      ></div>
     </div>
     <div
       class="is-divider"
@@ -38,7 +37,10 @@
         $t('list.total') + ' ' + files.length + ' ' + $t('list.item')
       "
     ></div>
-    <readmemd :option="readmemd" v-if="renderReadMeMD && readmemd.display"></readmemd>
+    <readmemd
+      :option="readmemd"
+      v-if="renderReadMeMD && readmemd.display"
+    ></readmemd>
 
     <viewer
       v-if="viewer && images && images.length > 0"
@@ -69,23 +71,22 @@ import {
   checkExtends,
 } from "@utils/AcrouUtil";
 import { mapState } from "vuex";
-import InfiniteLoading from "vue-infinite-loading";
 import ListView from "./components/list";
 import GridView from "./components/grid";
 import Markdown from "../common/Markdown";
+import InfiniteLoading from "vue-infinite-loading";
 export default {
   name: "GoList",
   components: {
-    InfiniteLoading,
     ListView,
     GridView,
     Headmd: Markdown,
     Readmemd: Markdown,
+    InfiniteLoading,
   },
-  data: function () {
+  data: function() {
     return {
       infiniteId: +new Date(),
-      busy: false,
       loading: true,
       page: {
         page_token: null,
@@ -124,40 +125,31 @@ export default {
   },
   computed: {
     ...mapState("acrou/view", ["mode"]),
-    images () {
+    images() {
-      return this.buildFiles.filter(
+      return this.files.filter(
         (file) => file.mimeType.indexOf("image") != -1
       );
     },
-    renderHeadMD () {
+    renderHeadMD() {
       return window.themeOptions.render.head_md || false;
     },
-    renderReadMeMD () {
+    renderReadMeMD() {
       return window.themeOptions.render.readme_md || false;
     },
   },
-  created () {
+  created() {
     this.render();
   },
   methods: {
-    pageLoad () {
+    infiniteHandler($state) {
-      if (!this.page.page_token) return;
+      // 首次进入页面不执行滚动事件
+      if (!this.page.page_token) {
+        return;
+      }
       this.page.page_index++;
-      console.log("滚动加载了", this.page.page_index, this.$route.path);
-      this.render("scroll");
-    },
-    infiniteHandler ($state) {
-      // TODO 异步请求的原因，导致数据响应在下个页面。需要终止上次请求
-      this.page.page_index++;
-      console.log("滚动加载了", this.page.page_index, this.$route.path);
       this.render($state);
     },
-    render (scroll) {
+    render($state) {
-      if (scroll) {
-        this.busy = true;
-      } else {
-        this.loading = true;
-      }
       this.headmd = { display: false, file: {}, path: "" };
       this.readmemd = { display: false, file: {}, path: "" };
       var path = this.$route.path;
@@ -184,8 +176,8 @@ export default {
               page_token: body.nextPageToken,
               page_index: body.curPageIndex,
             };
-            if (scroll) {
+            if ($state) {
-              this.files = this.buildFiles(this.files.concat(data.files));
+              this.files.push(...this.buildFiles(data.files));
             } else {
               this.files = this.buildFiles(data.files);
             }
@@ -193,22 +185,19 @@ export default {
               this.renderMd(data.files, path);
             }
           }
-          // if (body.nextPageToken) {
+          if (body.nextPageToken) {
-          //   $state.loaded();
+            this.$refs.infinite.stateChanger.loaded();
-          // } else {
+          } else {
-          //   $state.complete();
+            this.$refs.infinite.stateChanger.complete();
-          // }
+          }
           this.loading = false;
-          this.busy = false;
         })
         .catch((e) => {
-          // $state.loaded();
           this.loading = false;
-          this.busy = false;
           console.log(e);
         });
     },
-    buildFiles (files) {
+    buildFiles(files) {
       var path = this.$route.path;
       return !files
         ? []
@@ -233,7 +222,7 @@ export default {
               return a.isFolder ? -1 : 1;
             });
     },
-    checkPassword (path) {
+    checkPassword(path) {
       var pass = prompt(this.$t("list.auth"), "");
       localStorage.setItem("password" + path, pass);
       if (pass != null && pass != "") {
@@ -242,9 +231,8 @@ export default {
         this.$router.go(-1);
       }
     },
-    copy (path) {
+    copy(path) {
       let origin = window.location.origin;
-      console.log(path);
       path = origin + encodeURI(path);
       this.$copyText(path)
         .then(() => {
@@ -261,13 +249,13 @@ export default {
           });
         });
     },
-    thum (url) {
+    thum(url) {
       return url ? `/${this.$route.params.id}:view?url=${url}` : "";
     },
-    inited (viewer) {
+    inited(viewer) {
       this.$viewer = viewer;
     },
-    action (file, target) {
+    action(file, target) {
       if (file.mimeType.indexOf("image") != -1) {
         this.viewer = true;
         this.$nextTick(() => {
@@ -283,7 +271,7 @@ export default {
       }
       this.target(file, target);
     },
-    target (file, target) {
+    target(file, target) {
       let path = file.path;
       if (target === "_blank") {
         window.open(path);
@@ -310,7 +298,7 @@ export default {
         return;
       }
     },
-    renderMd (files, path) {
+    renderMd(files, path) {
       var cmd = this.$route.params.cmd;
       if (cmd) {
         return;
@@ -334,7 +322,7 @@ export default {
         }
       });
     },
-    goSearchResult (file, target) {
+    goSearchResult(file, target) {
       this.loading = true;
       let id = this.$route.params.id;
       this.axios
@@ -352,7 +340,7 @@ export default {
           console.log(e);
         });
     },
-    getIcon (type) {
+    getIcon(type) {
       return "#" + (this.icon[type] ? this.icon[type] : "icon-weizhi");
     },
   },