Laravel Vue — 路由器視圖不渲染

Question

所以我試圖通過使用 laravel vue vue-router 和 vuex 構建一個來了解 SPA。

我的問題是，無論我做什么，路由器視圖都根本沒有渲染，我在這里開始失去希望，它只顯示來自 vue 組件的 Hello 消息。

只要我知道代碼沒有任何錯誤。

這是我的設置和文件

Laravel 路由器頁面：web.php

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

home.blade.php：

@extends('layouts.app')

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

這是我的 vue 文件

應用程序.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                        
});                               

路由器.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 }              
 ]                                                         
} )                                                         

應用程序.vue 文件

<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>

我得到的OUT PUT是 App.vue 組件加載但<router-view></router-view>呈現為 html 注釋<!---->

Hello
<!---->

Answer 1

我嘗試在 codeandbox 中重新創建您的代碼，結果發現您定義了錯誤的路線。 您必須在router.js上使用routes而不是router

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

---

在你的app.js你告訴 Vue app 掛載在一個 id 為app的元素上，因此

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

但是在你的home.blade.php你沒有任何<div id="app"></div> 。

它可能存在於您的layouts.app但您沒有包含它。 如果它不存在，那就是問題所在。

我也不確定你是如何在 Laravel 中聲明你的路線的：

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

通常它看起來像：

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

來源： https : //laravel-news.com/using-vue-router-laravel

Answer 2

好的，請試試這個。

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

然后訪問 URL "http://localhost/exmaple" 並查看它是否正常工作。