Vue router : TypeError: Cannot read property '$createElement' of undefined
Vue router : TypeError: Cannot read property '$createElement' of undefined
所以,我是 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>
parent只有一个<router-view></router-view>
我收到了同样的错误信息,我是这样解决的:
component: workspace
没有
components: workspace
注意添加的 s
在组件s: 工作区
是的,当我从路线上放下 s 时,一切都很好。
像这样:
component: workspace
所以,我是 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>
parent只有一个<router-view></router-view>
我收到了同样的错误信息,我是这样解决的:
component: workspace
没有
components: workspace
注意添加的 s
在组件s: 工作区
是的,当我从路线上放下 s 时,一切都很好。
像这样:
component: workspace