だから、私は vue.js にかなり慣れていないので、それは私の愚かな間違いかもしれませんが、残念ながら、2 時間以上検索して見つけたので、Google は今日私の友達ではないようですなし。
コンポーネントをロードしようとすると問題が発生します。このコンポーネントは他のコンポーネントにネストされており、ルーターがそれをロードすることになっています。<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>