Laravel Vue - Router-Ansicht wird nicht gerendert

Question

Also versuche ich, etwas über SPA zu lernen, indem ich eines mit Laravel Vue Vue-Router und Vuex baue.

Mein Problem ist, dass die Router-Ansicht überhaupt nicht gerendert wird, egal was ich tue, und ich fange an, die Hoffnung hier zu verlieren, und sie zeigt nur die Hello-Nachricht von Vue-Komponenten an.

Der Code hat, solange ich weiß, keine Fehler.

Dies ist mein Setup und Dateien

Laravel Router Seite: web.php

Route::get('/{any}', [App\Http\Controllers\AppController::class, 'index'])->where('any', '.*');

home.blade.php:

@extends('layouts.app')

@section('content')
   <App></App>
@endsection

und das sind meine vue dateien

app.js:

import Vue from 'vue';            
import router from './router'     
import App from './components/App'
                                  
require('./bootstrap');           
                                  
const app = new Vue({             
 el: '#app',                   
 components: { App },          
 router                        
});                               

router.js

import Vue from 'vue'                                       
import VueRouter from 'vue-router'                          
import ExampleComponent from './components/ExampleComponent'
                                                            
Vue.use( VueRouter )                                        
                                                            
export default new VueRouter( {                             
 mode: 'history',                                          
 router: [                                                 
  { path: '/', component: ExampleComponent }              
 ]                                                         
} )                                                         

App.vue-Datei

<template>
 <div class="content">
  <h1>Hello</h1>
  <router-view></router-view>
 </div>
</template>

<script>
 export default {
  name: 'App'
 }
</script>

ExampleComponenet.vue

<template>
 <div>
  <h1>This is the Example Component</h1>
 </div>
</template>

Der OUT PUT , den ich erhalten habe, ist die App.vue-Komponente, die geladen, aber <router-view></router-view>als HTML-Kommentar gerendert wird<!---->

Hello
<!---->

Answer 1

Ich habe versucht, Ihren Code in Codesandbox neu zu erstellen, und es stellte sich heraus, dass Sie Ihre Routen falsch definieren. Stattdessen müssen routerSie routesauf Ihrem verwendenrouter.js

https://codesandbox.io/s/proud-leftpad-fwtf7?file=/src/router.js

---

In Ihrer app.jsApp weisen Sie die Vue-App an, auf einem Element mit der ID " appalso" zu mounten

{
  el: "#app",
  components: ...
}

aber auf deinem home.blade.phphast du keine <div id="app"></div>.

Es könnte sein, dass es auf Ihrem vorhanden ist, layouts.appaber Sie haben es nicht aufgenommen. Wenn es nicht da ist, dann ist das das Problem.

Ich bin mir auch nicht sicher, wie Sie Ihre Route in Laravel angegeben haben:

Route::get('/{any}', [App\Http\Controllers\AppController::class, 'index'])->where('any', '.*');

Normalerweise würde es so aussehen:

Route::get('/{any}', 'SpaController@index')->where('any', '.*');

Quelle: https://laravel-news.com/using-vue-router-laravel

Answer 2

Okay, bitte versuchen Sie es.

 router: [                                                 
  { path: '/example', component: ExampleComponent }              
 ]

Besuchen Sie dann die URL "http: // localhost / exmaple" und prüfen Sie, ob sie ordnungsgemäß funktioniert.