Vue router: TypeError: Невозможно прочитать свойство '$ createElement' из неопределенного - PullRequest
Новая
       21

Vue router: TypeError: Невозможно прочитать свойство '$ createElement' из неопределенного

0 голосов
/ 07 мая 2018

Итак, я довольно новичок в vue.js, и это может быть моей глупой ошибкой, но, увы, сегодня Google, похоже, не мой друг, так как я искал чуть больше 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>

У родителя есть только один <router-view></router-view>

Ответы [ 2 ]

0 голосов
/ 22 сентября 2018

Я получил то же сообщение об ошибке, вот как я решил: 

component: workspace

Не 

components: workspace

Обратите внимание на добавленные s

в компоненте s : рабочее пространство

Да, как только я сбросил s с маршрута, все было в порядке.

Вот так: 

component: workspace
0 голосов
/ 07 мая 2018

Старайтесь избегать вложения children, поскольку в официальных документах children не является вложенным, вы можете получить более 3 вложенных маршрутов только с одним дочерним массивом.

Ваш код маршрута должен выглядеть примерно так: 

  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,
      },
      {
        path: 'allconfigs/sms',
        component: smsConfigs,
      },
      {
        path: 'allconfigs/sms/:configId',
        components: smsDetails,
        beforeEnter: (to, from, next) => {
          console.log('SMS Details beforeEnter()')
          next()
        }
      }
    ],
    beforeEnter: (to, from, next) => {
      console.log('SMS list beforeEnter()')
      next()
    }
  }]

Пожалуйста, посмотрите на этот рабочий пример маршрутизации https://jsfiddle.net/ricardoorellana/08trt6zb/

...