javascript - vue报错没有意义 : Unhandled error during execution of scheduler flush. onVnodeUnmounted=fn ref=Ref< null >>

Question

我认为这个问题源于一个父模板在 Vue.js 3 中有多个子模板。与 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>

router-link to="/information"链接工作正常。它只是加载其中没有其他组件的 View 。
其他 router-link :to="{ path: '/create', name: 'PostCreate'}"在反复尝试加载组件大约 50 次后失败并将其记录在控制台中:

 [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 <PostCreate> 
  at <PostCreate>  
  at <PostCreate>  
  ... // repeats over and over again until
  at <PostCreate onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App> 
  at <App>

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制作 form 的组件供用户创建帖子。
信息.vue

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

PostCreate.vue

<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-Router 4 的 Vue.js 3 中这是一个问题，而之前它运行良好？我该如何解决？

Answer 1

发生这种情况是因为 PostCreate view 正在尝试递归加载自身。由于您为 View 和子组件使用了相同的名称，因此父名称会覆盖注册中的子名称，并且 View 会尝试加载自己而不是子组件。
它与此等价，这也会导致 View 尝试自行加载。

<template>
  <div class="content">
    <h1>I make a form</h1>
    <PostCreate></PostCreate>
  </div>
</template>

<script>
export default {
  name: "PostCreate",
};
</script>

你不会得到 Failed to resolve component错误，因为它需要 <PostCreate></PostCreate>成为自己。相反，您会得到相同的递归错误。
所以你只需要重命名子组件。对于不同的组件，尤其是在较大的项目中，始终使用不同的文件名也是一个很好的做法，以保持文件清晰。