Блог

vue-router] Не удалось разрешить рендеринг асинхронного компонента: ошибка типа: не удается прочитать свойство ‘$createElement’ неопределенного app.js: 39190 [vue-router] ошибка обнаружения во время навигации по маршруту: app.js: 41382 Ошибка типа: не удается прочитать свойство ‘$createElement’ неопределенного

app.js

 import {router} from './plugins/vuerouter';
import admin from './components/admin/admin';
new Vue({
    vuetify,
    router,
    component: {
        admin
    },
     render: h => h(admin)
}).$mount('#app')
  

vuerouter.js

 import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);


import test from '../components/test.vue';

const routes = [{
    components: test,
    name: "test",
    path: "/test"
}];
export const router=  new VueRouter({
    routes // short for `routes: routes`
})
  

admin.vue

 <template>
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer" app>
      <v-list dense>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-home</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item>
          <v-list-item-action>
            <v-icon>mdi-email</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Contact</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item @click="logout">
          <v-list-item-action>
            <v-icon>mdi-power</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Logout</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <router-link tag="li" to="/test" class="list-group-item">
           test
        </router-link>
      </v-list>

    </v-navigation-drawer>

    <v-app-bar app color="indigo" dark>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>

    <v-main>
      <v-container class="fill-height" fluid>
        <router-view ></router-view>
      </v-container>
    </v-main>
    <v-footer color="indigo" app>
      <span class="white--text">amp;copy; {{ new Date().getFullYear() }}</span>
    </v-footer>
  </v-app>
</template>
<script>
export default {
  props: {
    source: String,
  },
  data: () => ({
    drawer: null,
  }),
  methods: {
    logout() {
      axios.post("/logout").then((response) => (window.location.href = "/"));
    },
  },
};
</script>
  

когда я нажал на тест ссылки маршрутизатора, я получаю следующую ошибку

 vue-router] Failed to resolve async component render: TypeError: Cannot read property '$createElement' of undefined
warn @ app.js:39190
(anonymous) @ app.js:41200
(anonymous) @ app.js:41270
(anonymous) @ app.js:41213
(anonymous) @ app.js:41238
(anonymous) @ app.js:41238
flatMapComponents @ app.js:41237
(anonymous) @ app.js:41173
iterator @ app.js:41426
step @ app.js:41072
step @ app.js:41076
runQueue @ app.js:41080
confirmTransition @ app.js:41456
transitionTo @ app.js:41326
push @ app.js:41796
push @ app.js:42127
handler @ app.js:40276
invokeWithErrorHandling @ app.js:44098
invoker @ app.js:44423
original._wrapper @ app.js:49782
app.js:39190 [vue-router] uncaught error during route navigation:
warn @ app.js:39190
abort @ app.js:41381
(anonymous) @ app.js:41433
(anonymous) @ app.js:41205
(anonymous) @ app.js:41270
(anonymous) @ app.js:41213
(anonymous) @ app.js:41238
(anonymous) @ app.js:41238
flatMapComponents @ app.js:41237
(anonymous) @ app.js:41173
iterator @ app.js:41426
step @ app.js:41072
step @ app.js:41076
runQueue @ app.js:41080
confirmTransition @ app.js:41456
transitionTo @ app.js:41326
push @ app.js:41796
push @ app.js:42127
handler @ app.js:40276
invokeWithErrorHandling @ app.js:44098
invoker @ app.js:44423
original._wrapper @ app.js:49782
app.js:41382 TypeError: Cannot read property '$createElement' of undefined
    at render (app.js:39034)
    at app.js:41211
    at app.js:41238
    at Array.map (<anonymous>)
    at app.js:41238
    at Array.map (<anonymous>)
    at flatMapComponents (app.js:41237)
    at app.js:41173
    at iterator (app.js:41426)
    at step (app.js:41072)
  

webpack.mix.js

 const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
// webpack.config.js

module.exports = {
    rules: [{
        test: /.s(c|a)ss$/,
        use: [
            'vue-style-loader',
            'css-loader',
            {
                loader: 'sass-loader',
                // Requires sass-loader@^7.0.0
                options: {
                    implementation: require('sass'),
                    fiber: require('fibers'),
                    indentedSyntax: true // optional
                },
                // Requires sass-loader@^8.0.0
                options: {
                    implementation: require('sass'),
                    sassOptions: {
                        fiber: require('fibers'),
                        indentedSyntax: true // optional
                    },
                },
            },
        ],
    }, ],
}
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');
  

ошибка

свойство ‘component’ должно быть ‘components’ в app.js , свойство routes obj ‘components’ должно быть ‘component’ в vuerouter.js