I tried the same solution as yours, but I got an exception case, and now I understood it.
My program flow is: loading data after clicked button at search page and cache it at $route.params and go to detail page, save data at detail page and close detail page and then back to search page.
partial codes:
to push data and go to next page:
rulePage.$router.push({ name: nextPage, params: { pending$: pendingData || {}, q: rulePage.$root.nextQ() } });
to consume data in target page’s beforeRouteEnter hook, like:
beforeRouteEnter.next( vm => { /* consume data here */ })
to close page.
cancelPage() {
this.meta$ = {};
this.$destroy();
this.$router.back();
},
router-view:
<keep-alive :exclude="['LoginForm','ChangePwd']"><router-view :key="$route.fullPath" /></keep-alive>
, this works in my some cases, but, in the following cycles, it fails:
- click ‘Maintain’ at Search page to load data and go to Detail page. OK, data shown at detail page.
- click ‘Save’ at Detail page to save data and call cancelPage() to return to Search page.
- re-do step 1 again. KO, failed, beforeRouteEnter.next( vm => { /* this callback is not called */ }); beforeRouteEnter() itself is called.
- cancel Detail page and return to search page, and click ‘Maintain’ again, this time it works.
I can always repeat this, but now I possibly know why callback for next() is not called in 2nd entry.
After I compared my code to another ‘try to simulate it with minimu code lines’, I found, after currentPage.$destroy() called, if my code access this destroyed instance, next time go to page with this component (not re-used because I used an incremental id ‘q’ in route path), it will not call the callback, I guess it possibly hit an invalid case and leave an inconsistent status somewhere.
My code uses $axios to save data with ‘await’ and close page immediately, after page closed, in ‘finally block’ some codes uses the destroyed page component, after I move the ‘cancelPage’ to the last line (after the ‘finally block’ of calling axios), it fixed the problem.
package versions:
├── @vee-validate/i18n@4.5.7
├── @vue/cli-plugin-babel@4.5.15
├── @vue/cli-plugin-router@4.5.15
├── @vue/cli-plugin-vuex@4.5.15
├── @vue/cli-service@4.5.15
├── axios@0.21.4
├── base64url@3.0.1
├── bigdecimal@0.6.1
├── bootstrap-icons-vue@0.8.0
├── bootstrap-vue-treeview@1.0.8
├── bootstrap-vue@2.21.2
├── bootstrap@4.6.1
├── core-js@3.20.2
├── crypto@1.0.1
├── dt-format@1.0.8
├── popper.js@1.16.1
├── sass-loader@10.2.0
├── sass@1.45.2
├── v-contextmenu@2.9.0
├── v-mask@2.3.0
├── vee-validate@3.4.14
├── vue-axios@3.4.0
├── vue-click-outside@1.1.0
├── vue-i18n@8.26.8
├── vue-modal-router@0.6.1
├── vue-router@3.5.3
├── vue-runtime-helpers@1.1.2
├── vue-template-compiler@2.6.14
├── vue@2.6.14
├── vuex@3.6.2
└── webpack@4.46.0