Javascript Vue错误毫无意义：在执行计划程序刷新期间出现未处理的错误。onVnodeUnmounted=fn<；onVnodeUnmounted>；ref=ref<；空>&燃气轮机；

我认为这个问题源于父模板在

Vue.js3

和

Vue Router 4

中有多个子模板。在这两个包的早期版本中，我从未遇到过这个问题

我有一个简单的

App.vue

文件：

<template>
    <div id="app">
         <main id="content">
                    <div id="nav">
                        <!--<router-link to="/about">About</router-link>-->
                        <router-link to="/information">Information</router-link>
                        <router-link :to="{ path: '/create', name: 'PostCreate'}">Create</router-link>
                    </div>
                    <router-view></router-view>
         </main>
</template>

vuerouter.js

const routes = [
    {
        path: '/',
        name: 'HomeView',
        component: HomeView
    },
    {
        path: '/information',
        name: 'Information',
        component: () => import(/* webpackChunkName: "Information" */ '../views/information/Information.vue')
    }
    ,
    {
        path: '/create',
        name: 'PostCreate',
        component: () => import(/* webpackChunkName: "Create" */ '../views/posts/PostCreate.vue')
    }
];

Information.vue

和

PostCreate.vue

之间的唯一区别在于后者导入另一个

vue

组件，以生成一个

表单

，供用户创建帖子

信息.vue

<template>
<div>
<p>I am full of good info</p>
</div>
</template>
<script>
    export default {
        name: 'Information'
    }
</script>

<template>
    <div class="content">

            <h1>I make a form</h1>
            <Post-Create></Post-Create>

    </div>
</template>

<script>
    import PostCreate from "../../components/PostCreate.vue";

    export default {
        name: "PostCreate",
        components: {
            "Post-Create": PostCreate
        }
    }
</script>

我有很多好消息

导出默认值{
名称：“信息”
}

后创建.vue

<template>
<div>
<p>I am full of good info</p>
</div>
</template>
<script>
    export default {
        name: 'Information'
    }
</script>

<template>
    <div class="content">

            <h1>I make a form</h1>
            <Post-Create></Post-Create>

    </div>
</template>

<script>
    import PostCreate from "../../components/PostCreate.vue";

    export default {
        name: "PostCreate",
        components: {
            "Post-Create": PostCreate
        }
    }
</script>

我做一张表格
从“../../components/PostCreate.vue”导入后创建；
导出默认值{
名称：“后创建”，
组成部分：{
“后期创建”：后期创建
}
}

---

为什么Vue Router 4在Vue.js 3中会出现这个问题，而以前它工作正常？如何解决它？

发生这种情况是因为

post-create

视图试图递归加载自身。由于视图和子组件使用了相同的名称，因此父名称将覆盖注册中的子名称，并且视图将尝试加载自身而不是子组件

这与此等效，这也会导致视图尝试加载自身

我做一张表格
导出默认值{
名称：“后创建”，
};

您不会得到一个

未能解决组件

错误，因为它需要

本身。相反，您会得到相同的递归错误

---

因此，您只需要重命名子组件。对于不同的组件，尤其是在较大的项目中，始终使用不同的文件名以保持文件清晰是一个很好的做法。

根据错误，“这是一个Vue内部错误。”。你应该在给定的URL（IMHO）上打开一个新的问题谢谢你。文件中有没有提到这一点？在Vue中调试通常是如此模糊吗？有没有更好的方法debugging@volumeone不客气。我想我从来没有在命名中明确提到过它。这也有点不直观，你是对的，但我认为这是一种相当罕见的情况，调试通常更直接