加载或刷新 Ionic 应用程序时出错，但在导航回该应用程序时有效

如何解决加载或刷新 Ionic 应用程序时出错，但在导航回该应用程序时有效

我对 Vue 的经验很少，而且我也是 Ionic 的新手，所以我不确定这里发生了什么。

我正在尝试将 IonSlides 添加到我的应用程序中，但在加载或刷新页面时总是出现错误，但是如果我导航到其他网站然后在浏览器中点击返回按钮，它会按预期工作。为了清楚起见，我使用 ionic serve 运行该项目，在 http://localhost:8100/ 打开它不起作用，然后导航到假设 google.com，点击浏览器中的返回按钮导航回 {{1}并且它按预期工作，然后如果我刷新页面，我会再次遇到相同的错误。

错误：

http://localhost:8100/

代码：

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <Anonymous key=1075 > 
  at <IonSlides pager="true" > 
  at <Slides pack_id="180" > 
  at <Anonymous> 
  at <IonPage isInOutlet=true registerIonPage=fn<registerIonPage> > 
  at <BaseLayout page-title="Pack 180" back-link="/month/6" isInOutlet=true  ... > 
  at <Pack ref=Ref< Proxy {…} > key="/pack/180" isInOutlet=true  ... > 
  at <IonRouterOutlet id="main-content" > 
  at <IonApp> 
  at <App>

Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insert (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:222:16)
    at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3958:9)
    at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3899:13)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3819:21)
    at componentEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4312:21)
    at reactiveEffect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:71:24)
    at effect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:46:9)
    at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4277:89)
    at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4235:9)
    at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4195:17)
insert @ runtime-dom.esm-bundler.js?830f:11
mountElement @ runtime-core.esm-bundler.js?5c40:3857
processElement @ runtime-core.esm-bundler.js?5c40:3789
patch @ runtime-core.esm-bundler.js?5c40:3709
componentEffect @ runtime-core.esm-bundler.js?5c40:4211
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4176
mountComponent @ runtime-core.esm-bundler.js?5c40:4134
processComponent @ runtime-core.esm-bundler.js?5c40:4094
patch @ runtime-core.esm-bundler.js?5c40:3712
patchKeyedChildren @ runtime-core.esm-bundler.js?5c40:4450
patchChildren @ runtime-core.esm-bundler.js?5c40:4333
processFragment @ runtime-core.esm-bundler.js?5c40:4084
patch @ runtime-core.esm-bundler.js?5c40:3705
patchKeyedChildren @ runtime-core.esm-bundler.js?5c40:4414
patchChildren @ runtime-core.esm-bundler.js?5c40:4357
patchElement @ runtime-core.esm-bundler.js?5c40:3981
processElement @ runtime-core.esm-bundler.js?5c40:3792
patch @ runtime-core.esm-bundler.js?5c40:3709
componentEffect @ runtime-core.esm-bundler.js?5c40:4278
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
flushJobs @ runtime-core.esm-bundler.js?5c40:362
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:264
queueJob @ runtime-core.esm-bundler.js?5c40:258
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
scheduler @ reactivity.esm-bundler.js?a1e9:819
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
set @ reactivity.esm-bundler.js?a1e9:291
GET_PACK_CARDS @ index.js?4360:62
wrappedMutationHandler @ vuex.esm-browser.js?5502:808
commitIterator @ vuex.esm-browser.js?5502:438
eval @ vuex.esm-browser.js?5502:437
_withCommit @ vuex.esm-browser.js?5502:596
commit @ vuex.esm-browser.js?5502:436
boundCommit @ vuex.esm-browser.js?5502:376
eval @ index.js?4360:153
Promise.then (async)
getPackCards @ index.js?4360:151
wrappedActionHandler @ vuex.esm-browser.js?5502:815
dispatch @ vuex.esm-browser.js?5502:488
bounddispatch @ vuex.esm-browser.js?5502:373
mounted @ Slides.vue?6b1b:41
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js?5c40:1910
flushPostFlushCbs @ runtime-core.esm-bundler.js?5c40:333
render @ runtime-core.esm-bundler.js?5c40:4796
mount @ runtime-core.esm-bundler.js?5c40:3019
app.mount @ runtime-dom.esm-bundler.js?830f:1220
eval @ main.js?56d7:38
Promise.then (async)
eval @ main.js?56d7:37
./src/main.js @ app.js:1520
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:1892
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(anonymous) @ app.js:994
(anonymous) @ app.js:997

幻灯片.vue

<template>
    <base-layout :page-title="`Pack ${pack.id}`" :back-link="`/month/${pack.month_id}`">
        <h2 v-if="!pack">Could not find pack...</h2>
        <slides :pack_id="packId"></slides>
    </base-layout>
</template>

<script>
import Slides from './Slides.vue';
export default {
    components: {
        Slides,},data() {
        return {
            packId: this.$route.params.id
        }
    },watch: {
        '$route'(currentRoute) {
            this.packId = currentRoute.params.id;
        },computed: {
        pack() {
            return this.$store.getters.pack;
        },mounted(){
        this.$store.dispatch('getPack',{id: this.packId});
    }
}
</script>

我想我在某个地方犯了一些小错误，有人可以帮忙吗？ 谢谢。

编辑：

我想，我想出了问题所在，但我不知道如何解决它。

在 Slides.vue 中：

<template>
    <ion-slides pager="true">
        <ion-slide 
            v-for="slide in slides"
            :key="slide.id">
                <card :card_id="slide.id"></card>
        </ion-slide>
    </ion-slides>
</template>

<script>
import {
    IonSlides,IonSlide
    } from '@ionic/vue';
import Card from './Card.vue';
export default {
    props: ['pack_id'],components: {
        IonSlides,IonSlide,Card
    },data() {
        return {
            packId: this.$route.params.packId,}
    },setup() {
        // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
        const slideOpts = {
        initialSlide: 1,speed: 400
        };
        return { slideOpts }
    },computed: {
        slides() {
            return [...this.$store.getters.packCards];
        }
    },mounted(){
        this.$store.dispatch('getPackCards',{id: this.pack_id ?? this.packId});
        
    }
}

 </script>

上面的代码首先返回一个带有空数组目标或一些默认值的代理，如果我这样设置，然后

computed: {
        slides() {
            return this.$store.getters.packCards
        }

更新 mounted(){ this.$store.dispatch('getPackCards',{id: this.pack_id ?? this.packId}); } 并且幻灯片无法重新渲染。

我尝试使用 this.$store.getters.packCards 或 created 代替 beforeMount，但结果相同。

编辑 2：

我设法通过将 mounted 添加到 v-if="slides.length>0" 来解决问题，但恐怕这不是最佳解决方案。正确的方法是什么？