Vue 错误没有意义：执行调度程序刷新期间出现未处理的错误。onVnodeUnmounted=fn<onVnodeUnmounted> 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"链接工作正常。它只是加载视图，其中没有其他组件。

另一个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.js 3 和 Vue-Router 4 中这是一个问题，而之前它工作得很好？我该如何解决？

Answer 1

发生这种情况是因为PostCreate视图尝试递归加载自身。由于您对视图和子组件使用了相同的名称，因此父组件名称会覆盖注册中的子组件名称，并且视图会尝试加载自身而不是子组件。

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

<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>本身就是错误。相反，您会得到相同的递归错误。}

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