7

だから、私は 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>

4

1 に答える 1