Vue 라우터: TypeError: 정의되지 않은 속성 '$createElement'를 읽을 수 없습니다.

Vue 라우터: TypeError: 정의되지 않은 속성 '$createElement'를 읽을 수 없습니다.

그래서 저는 vue.js를 처음 접하는 사람이고 저의 어리석은 실수일 수도 있지만 안타깝게도 구글은 오늘 제 친구가 아닌 것 같습니다. 왜냐하면 제가 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훅이 필요할 때 호출됩니다.로드에 실패한 컴포넌트는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>

부모에게는 1개밖에 없다.<router-view></router-view>

같은 에러 메세지가 표시되고, 다음과 같이 해결했습니다.

component: workspace

것은 아니다.

components: workspace

추가된 에 주의해 주세요.

컴포넌트: 워크스페이스

네, 루트에서 s를 떨어뜨리자마자 괜찮았어요.

다음과 같이 합니다.

component: workspace

언급URL : https://stackoverflow.com/questions/50218836/vue-router-typeerror-cannot-read-property-createelement-of-undefined