首页 文章

Vue router：TypeError：无法读取未定义的属性'$createElement'

提问于
浏览 次
0

所以，我对vue.js很新，这很可能是我的愚蠢错误，但唉，谷歌今天似乎不是我的朋友，因为我已经搜索了2个多小时，发现没有 .

尝试加载组件时出现问题 . 该组件嵌套在其他组件中，并且路由器应该加载它 . 我有其他组件加载这种方式（使用 <router-view></router-view> 和路由器）没有任何问题 . 与此组件唯一不同的是它在其根目录下嵌套了3个级别，而在我的所有其他组件中，我最深的是2个级别 .

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

Warning 1 :

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

Warning 2:

[vue-router] uncaught error during route navigation

Error:

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>

javascript vue.js vuejs2 vue-router quasar

2 回答

  • 17

    尽量避免嵌套 children ，因为在official's docs中 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/

    回复于
  • 2

    我得到了相同的错误消息，这就是我解决它的方式：

    component: workspace

    不

    components: workspace

    注意添加的 s

    在 components:workspace

    是的，一旦我从路线上放下 s 就没事了 .

    像这样：

    component: workspace
    回复于

相关问题