javascript - Vue路由器: TypeError: Cannot read property '$createElement' of undefined

Question

所以，我对 vue.js 还很陌生，这很可能是我犯的一个愚蠢的错误，但可惜的是，谷歌今天似乎不是我的 friend ，因为我一直在搜索超过 2 个几个小时却一无所获。

我的问题发生在尝试加载组件时。该组件嵌套在其他组件中，路由器应该加载它。我有其他组件以这种方式加载(使用 <router-view></router-view> 和路由器)，没有任何问题。该组件唯一不同的是，它在其根下嵌套了 3 层，而在我的所有其他组件中，最深的是 2 层。

当我尝试加载此组件时，我收到 2 个警告和一个错误:

警告 1:

[vue-router] Failed to resolve async component render: TypeError: Cannot read property '$createElement' of undefined

警告2:

[vue-router] uncaught error during route navigation

错误:

TypeError: Cannot read property '$createElement' of undefined
    at render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-d2e33d82","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/pages/config-pages/sms/smsConfigDetails.vue (app.js:1656), <anonymous>:5:16)
    at eval (vue-router.esm.js?fe87:1774)
    at eval (vue-router.esm.js?fe87:1801)
    at Array.map (<anonymous>)
    at eval (vue-router.esm.js?fe87:1801)
    at Array.map (<anonymous>)
    at flatMapComponents (vue-router.esm.js?fe87:1800)
    at eval (vue-router.esm.js?fe87:1736)
    at iterator (vue-router.esm.js?fe87:1943)
    at step (vue-router.esm.js?fe87:1717)

我的路由看起来像这样；都是我的beforeEnter钩子(Hook)在应该的时候被调用，加载失败的组件是 smsConfigDetails :

import allConfigs from 'pages/config-pages/allConfigs'
import smsConfigs from 'pages/config-pages/sms/allSmsConfigs'
import smsDetails from 'pages/config-pages/sms/smsConfigDetails'

export default [
  {
    path: '/',
    component: () => import('layouts/default'),
    children: [
      { path: '', component: () => import('pages/index') },
      [...]
      {
        path: 'allconfigs',
        component: allConfigs,
        children: [
          {
            path: 'sms',
            component: smsConfigs,
            children: [
              {
                path: ':configId',
                components: smsDetails,
                beforeEnter: (to, from, next) => {
                  console.log('SMS Details beforeEnter()')
                  next()
                }
              }
            ],
            beforeEnter: (to, from, next) => {
              console.log('SMS list beforeEnter()')
              next()
            }
          }
        ]
      }
      [...]
    ]
  },

  { // Always leave this as last one
    path: '*',
    component: () => import('pages/404')
  }
]

目前无法加载的组件的代码非常简单:

<template>
  <div>
    blablabla
  </div>
</template>

<script>
</script>

<style>
</style>

父级只有一个<router-view></router-view>

Answer 1

我收到了同样的错误消息，这就是我解决它的方法:

component: workspace

不是

components: workspace

注意添加的s

在组件中:工作区

是的，当我从路线上放下s后，一切都很好。

像这样:

component: workspace