Laravel Vue —路由器视图未呈现

时间:2020-10-19 15:19:42

标签: javascript laravel vue.js vuejs2 vue-router

因此,我试图通过使用laravel vue vue-router和vuex构建一个SPA来了解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文件

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

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

2 个答案:

答案 0 :(得分:0)

我尝试在codesandbox中重新创建代码,结果发现您定义的路线错误。您必须在router上使用routes来代替router.js

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


在您的app.js中,您告诉Vue应用安装在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

答案 1 :(得分:0)

好的,请尝试这个。

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

然后访问URL“ http:// localhost / exmaple”,看看它是否正常工作。