1
votes

La vue du routeur ne se charge pas

J'ai attaché des composants à router-link mais il ne se charge pas. J'utilise Vue js dans Laravel. Je travaille avec Laravel et Vue

Voici mon fichier lame de Laravel.

home.blade.php

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <AppMain> at resources/js/components/front/common/AppMain.vue
         <Root>

AppMain.vue:

Vue.component('app-main', require('./components/front/common/AppMain.vue').default);
Vue.component('app-login', require('./components/auth/Login.vue'));


const routes = [
{ 
    path: '*', 
    component: require('./components/front/common/AppMain.vue')
},
{ 
    path: '/login', 
    component: require('./components/auth/Login.vue')
}
]

const router = new VueRouter({
   routes
})

const app = new Vue({
   el: '#app',
   router
});

App.js

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>

export default
{
 
}

Erreur

<div id="app">
    <app-main></app-main>
</div>

laravel vue.js laravel-5.7 vue-router router

1 commentaires

github.com/vuejs/vue-router/issues/713

3 Réponses :

0
votes

Avez-vous essayé de supprimer ".default" de l'importation du composant principal de l'application? Dans mes premiers jours de travail vue / laravel, cela m'a également jeté. J'ai trouvé plus sûr d'utiliser simplement "importer depuis '../module path'" en haut à la place ou les états "require (...)". Je ne me souviens pas de quelle spécification de JavaScript cela renvoie.

2 commentaires

const routes = [{chemin: '/', nom: 'AppMain', composant: AppMain}, {chemin: '/ login', nom: 'Login', composant: Login}]

Donné comme ça. Mais une erreur arrive. [Vue warn]: Élément personnalisé inconnu: - avez-vous enregistré le composant correctement? Pour les composants récursifs, assurez-vous de fournir l'option "nom".

0
votes

Veuillez essayer avec ce code dans app.js.

import Vue from 'vue';
window.Vue = require('vue');

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

Vue.component('app-main',require('./components/front/common/AppMain.vue').default);
Vue.component('app-login', require('./components/auth/Login.vue'));

import appMain from './components/front/common/AppMain';
import appLogin from './components/auth/Login';


const routes = [
    {
      path: '/',
      component: appMain,
      children: [
          { 
              path: 'login',
              component: appLogin
          }
      ]
]

const router = new VueRouter({
   routes
})

const app = new Vue({
   el: '#app',
   router: router
});

0 commentaires

1
votes

Veuillez essayer avec ce code pour voir si cela fonctionne.

const app = new Vue({
    router,
    el: '#app',
    render: h => h(App) //add this new line
});

0 commentaires